之前我從來沒有體會到HTML5的便利，直到這次需要一個異步上傳的功能功能。一開始我以為文件的一些聲明必須為HTML5才管用，后來才知道添加了很多以前沒有的標簽，並可以直接播放視頻，音頻等。可以不再使用Flash插件實現動畫。然並卵，覺得這些東西跟平時用到的有什么關系，因為我從來不需要在網頁中嵌入什么視頻，音頻甚至是動畫。這也是對我來說HTML5跟之前的版本沒有太大區別的一個原因。
HTML5本質上還是HTML語言，簡單易用，只是增加了標簽（我是這么認為），這個對瀏覽器廠商的要求，即使再加幾個標簽叫HTML10跟開發Web應用程序的關系不大，因為最重要的是瀏覽器的支持。
在實際中，我要做的是一個郵件群發的功能，其中郵件賬號是上傳csv文件，因為主要是演示一下html5的異步上傳，所以我將業務需求簡化為上傳csv文件，文件的每行只有一個郵箱賬號，讀取文件的內容，判斷是否為郵箱，為郵箱返回成功，否則返回郵件格式不對。並沒有加入信息存入數據庫或服務器等代碼。以往的html ajax實現不了異步上傳，需要加入jquery等異步上傳的插件或者使用一些前端框架。演示的代碼的前端使用HTML5，后端使用的是Spring MVC框架，實現的一個簡易的異步文件上傳功能。
后端代碼簡單沒有什么可說的，先看下后端代碼：
誠如所見，如果為非郵箱格式返回 “error” , 格式正確返回 “success”
前端 js 代碼如下：
1 function upLoad(){ 2 // 獲取文件對象 3 var fileObj = document.getElementById("myfile").files[0]; 4 // 接收上傳文件的后台地址 5 var url= "${ctx}/emailMass/emailMass.do"; 6 // FormData 對象 7 var form = new FormData(); 8 form.append("myfile", fileObj); 9 10 form.append("emailAccount", $("#emailAccount").val()); 11 12 // XMLHttpRequest 對象 13 var xhr = new XMLHttpRequest(); 14 xhr.open("post", url, true); 15 16 17 xhr.onload = function () { 18 if(xhr.responseText=="success"){ 19 alert("群發消息成功"); 20 } 21 22 if(xhr.responseText=="error"){ 23 alert("郵箱格式有誤，請檢查"); 24 } 25 }; 26 xhr.send(form); 27 }
注意：1 xhr.onload 回調函數並沒有參數，不能像普通的ajax 回調函數中 有一個 data 參數，如function （data）{},這個data的值即返回值，
XMLHTTPRequest對象是通過 responseText獲得返回值得。
2 后端程序的返回值如果為中文，會存在亂碼，這兩點都是在使用ajax 時候不會遇到的。
3 ie8不支持FormData這個對象，如果是一個后台的管理系統一般不必考慮瀏覽器兼容問題，若是前台供客戶使用的系統要考慮到瀏覽器是否支持慎用此方法。
現在即使開發前台系統也不會再兼容ie6了，還用ie6的用戶是拋棄了時代，這樣的用戶我們也拋棄他（最頭痛的就是兼容問題，以前我們常這么打趣的說），希望那一天也拋棄ie8,我相信不會遠（偷笑）
前端的js除了返回值如果是中文亂碼我沒有解決（所以我返回英文，然后翻譯成中文），如果表單元素太多，通過FormData對象的append方法一個一個添加，也是件麻煩事
使用HTML5的上傳是不是很簡潔？
作為對比,可以看看其他異步上傳的方法
如果使用的是 ajaxfileupload ，首先你需要引入js <script src="../js/ajaxfileupload.js"></script>
前台代碼如下：
1 $(function(){ 2 //選擇文件之后執行上傳 3 $('#fileToUpload').on('change', function() { 4 $.ajaxFileUpload({ 5 url:'/emailMass/emailMass.do', 6 fileElementId:'myfile',//file標簽的id 7 dataType: 'json',//返回數據的類型 8 data:{emailAccount:$("#emailAccount").val()},//一同上傳的數據 9 success: function (data, status) { 10 11 if(data=="success"){ 12 alert("群發消息成功"); 13 } 14 15 if(data=="error"){ 16 alert("郵箱格式有誤，請檢查"); 17 } 18 }, 19 error: function (data, status, e) { 20 alert(e); 21 } 22 }); 23 }); 24 25 });
似乎使用別的方式也並不復雜，只需要引入其他js即可，確實如此，但是引入的js 要跟jquery 版本適應，不然很容易出現沖突，從而前台js報錯，無法執行。
Html5也是得顯示進度便得簡單，只需在原有的上傳函數中加入如下代碼：
1 xhr.upload.onprogress = function (ev) { 2 var percent = 0; 3 if(ev.lengthComputable) { 4 percent = 100 * ev.loaded/ev.total; 5 document.getElementById('bar').style.width = percent + '%'; 6 } 7 }
其中“bar”是進度條的id，你並不需要關心 ev.loaded 和 ev.total ，ev對象中瀏覽器已經做好了一切，總共有多少數據，上傳了多少等內容
為了看得更清楚，進度條的靜態html如下：
1 <html> 2 <head> 3 <style> 4 #progress{ 5 border: 1px solid blue; 6 width:500px; 7 height:20px; 8 } 9 #bar { 10 background:green; 11 height:20px; 12 width:0%; 13 } 14 </style> 15 </head> 16 <div id="progress"><div id="bar"></div></div> 17 </html>
其實進度條就是不斷改變 “bar”層的寬度，bar層的背景是綠色的，隨着上傳進度的增加，寬度的百分比不斷增加，當完成時，綠色條框也就達到100%