在上篇文章給大家介紹了這篇文章裡面的後台Servlet。所以這裡只看前台的JS代碼。
首先HTML5用AJAX提交資料先要學習一個HTML5新增加的對象：FormData
FormData 對象可以使用append 方法進行 key - value的資料添加，與以前我們常用的json不同的就是可以非同步上傳二進位檔案。
1、FormDate對象的建立
var formData = new FormData();
2、向 FormDate 對象添加資料
formData.append("catname", "我是一隻喵");formData.append("age", 1); // 數字類型會轉為字串類型// 可以增加上傳的二進位檔案，比如fileInputElement對象中已經包含了使用者所選擇的檔案formData.append("userfile", fileInputElement.files[0]);//也可以將一個 Blob 對象添加到 formData 中var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; var oBlob = new Blob([oFileBody], { type: "text/xml"});formData.append("webmasterfile", oBlob);
3、使用 FormData 對象
var xhr = new XMLHttpRequest();xhr.open("POST", "upload");xhr.send(formData);
HTML部分
FormData 對象簡單的介紹完畢後，我們來看看頁面的HTML代碼是怎麼寫的
<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>
最下面的div是用來顯示進度條的，所以需要對應的css樣式。樣式如下，顏色不好看，自己改吧：
<style type="text/css"> #parent{width:550px; height:10px; border:2px solid #09F;} #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} </style>
JS部分
重頭戲來了，在頁面上載入上jquery後我們來看 JavaScript 是怎麼寫的，首先是 file 組件的 onchange事件方法：
function showPic(){ var pic = $("#pic").get(0).files[0]; $("img").prop("src" , window.URL.createObjectURL(pic) );}
showPic的第一行是從 file 對象得到上傳檔案 。 第二行則為 img 設定了src屬性。 可以在頁面中得到即時預覽的效果。
在看 uploadFile 方法之前，再讓我們簡單學習一下進度事件 （Progress Events ）的progress 吧 ......
Progress Events規範是W3C的一個工作草案，定義了與用戶端伺服器通訊有關的事件。這些事件最早其實值針對XHR操作，但目前也被其它API借鑒。有以下6個進度事件。
loadstart：在接收到相應資料的第一個位元組時觸發。
progress：在接收相應期間持續不斷觸發。 //我們就只看著一個好了
error：在請求發生錯誤時觸發。
abort：在因為調用abort()方法而終止連結時觸發。
load：在接收到完整的相應資料時觸發。
loadend：在通訊完成或者觸發error、abort或load事件後觸發。
progress事件是Mozilla提交的，這個事件會在瀏覽器接收新資料期間周期性地觸發。而onprogress事件處理常式會接收到一個event對象，其target屬性是XHR對象，但包含著三個額外的屬性：
lengthComputable ：表示進度資訊是否可用的布爾值
position ：表示已經接收的位元組數
totalSize ：表示根據Content-Length相應頭部確定的預期位元組數。
有了這些資訊，我們就可以為使用者建立一個進度列指示器了。但是 問題又來了， jQuery的 ajax 方法沒有關於 progress 事件的操作。這怎麼玩~~
好在通過查閱資料發現，jQuery的ajax方法調用的XMLHttpRequest對象是可以指定的！！！
看 8453行，就是它了。於是 uploadFile 方法的ajax部分的時候代碼就變成了這個樣式。
最重要的部分代碼：
function uploadFile(){ // 擷取上傳檔案，放到 formData對象裡面 var pic = $("#myhead").get(0).files[0]; var formData = new FormData(); formData.append("file" , pic); $.ajax({ type: "POST", url: "upload", data: formData , //這裡上傳的資料使用了formData 對象 processData : false, //必須false才會自動加上正確的Content-Type contentType : false , //這裡我們先拿到jQuery產生的 XMLHttpRequest對象，為其增加 progress 事件綁定，然後再返回交給ajax使用 xhr: function(){ var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } });}
最後加上 onprogress 方法，為整個功能花上個句號。
/** * 偵查附件上傳情況 ,這個方法大概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 +"%");}
最後附上整個頁面的代碼，方便對比。
<!DOCTYPE html><html> <head> <title>html5_2.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> #parent{width:550px; height:10px; border:2px solid #09F;} #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} </style> <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, //必須false才會自動加上正確的Content-Type contentType : false , 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
