使用Jquery開源外掛實現檔案上傳(帶進度條)
阿新 • • 發佈:2019-01-03
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>test</title> <style type="text/css"> #progress{width:90%;margin:5%;} </style> <meta charset="utf-8"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" /> <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="style/upload/js/vendor/jquery.ui.widget.js"></script> <script src="style/upload/js/jquery.iframe-transport.js"></script> <script src="style/upload/js/jquery.fileupload.js"></script> </head> <body> <input id="fileupload" type="file" name="image" data-url="admin/UploadImage.do"> <progress id="progress" value="0" max="100"></progress> <script> $(function () { p = $("#progress"); $('#fileupload').fileupload({ dataType: 'json', progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); p.val(progress); }, done: function(e, data) { alert("上傳成功"); } }); }); </script> </body> </html>