上傳文件進度百分比顯示 <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript"> function showPic(){ var pic = $("#pic").get(0).files[0]; $("img").prop("src" , window.URL.createObjectURL(pic) ); uploadFile(); } function uploadFile(){ var pic = $("#pic").get(0).files[0]; var formData = new FormData(); formData.append("file" , pic); /** * 必須false才會避開jQuery對 formdata 的默認處理 * XMLHttpRequest會對 formdata 進行正確的處理 */ $.ajax({ type: "POST", url: "upload", data: formData , processData : false, contentType : false ,//必須false才會自動加上正確的Content-Type xhr: function(){ var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } }); } /** * 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次 */ function onprogress(evt){ var loaded = evt.loaded; //已經上傳大小情況 var tot = evt.total; //附件總大小 var per = Math.floor(100*loaded/tot); //已經上傳的百分比 $("#son").html( per +"%" ); $("#son").css("width" , per +"%"); } </script> </head> <body> <img width="400" height="250"/><br /> <input type="file" id="pic" name="pic" onchange="showPic()"/> <input type="button" value="上傳圖片" onclick="uploadFile()" /><br /> <div id="parent"> <div id="son"></div> </div> </body> </html>