直接放代碼。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <input type="file" id="myFile"/> <progress id="myProgress" value="0"></progress> <hr/> <script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script> <script>//第一種方式，ajax綁定進度條 $("#myFile").change(function () { var formData = new FormData(); formData.append("filename",$(this)[0].files[0]); $.ajax({ method: "post",//請求方式 url: "xxxx",//請求服務端地址 data: formData, //這里上傳的數據使用了formData 對象 contentType: false,//避免JQuery操作頭部信息，丟失邊界符，從而使服務端無法識別此編碼類型文件 processData: false,//不序列化將要傳輸的文件數據 xhr: function () { //這里我們先拿到jQuery產生的 XMLHttpRequest對象，為其增加 progress 事件綁定，然后再返回交給ajax使用 var xhr = $.ajaxSettings.xhr(); if (onprogress && xhr.upload) { xhr.upload.addEventListener("progress", onprogress, false); return xhr; } }, success:function () {//完成事件時 }, error:function () {//出現錯誤時的事件 } }); }); /** * 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次 */ function onprogress(evt) { var loaded = evt.loaded; //已經上傳大小情況 var tot = evt.total; //附件總大小 var per = Math.floor(100 * loaded / tot); //已經上傳的百分比 $("#myProgress").attr("value",per); } </script> </body> </html>