近期項目中有好幾次用到多圖上傳，第一次在項目中真正用到Ajax技術，稍微整理了下，貼個案例出來。
我們傳統的做法是當用戶提交一個表單時，就向web服務器端發送一個請求。服務器接受並處理傳來的表單信息，處理完成后返回一個新的頁面。這個做法比較浪費帶寬，當請求數較多時，頁面響應的時間就依賴於服務器處理的時間。
而Ajax應用僅向服務器發送並取回必需的數據，其他不需要的數據不用響應，它使用SOAP或其它一些基於XML的web service接口，並在客戶端采用JS來處理來自服務器的響應。因此在服務器和瀏覽器之間交換的數據比較少，應用能很快速的響應。使用Ajax應用的最大特點是實現內容部分更新，不用刷新整個頁面就能維護指定的數據，實現動態更新，這樣能避免在網絡上發送一些沒有修改過的信息。Ajax應用的最大缺點是可能破壞瀏覽器后退按鈕的正常行為。在Ajax中，JS主要用於將用戶界面上的數據傳遞到服務器端，並處理返回來的結果。XMLHttpRequest對象用來響應通過http傳遞的數據，一旦數據返回到客戶端就可以立刻使用DOM將數據放到頁面上。
工作原理大致如下：
1.新建一個XMLHttpRequest 對象，用於直接與服務器通信。注意不同瀏覽器的不同寫法。
xhr = new XMLHttpRequest();
2.向服務器發送請求，需要使用open()和send()。
open() 方法需要三個參數。第一個參數定義發送請求所使用的方法（GET 還是 POST）。第二個參數規定服務器端腳本的 URL。第三個參數規定應當對請求進行異步地處理。
send() 方法可將請求送往服務器。只有一個參數，為要發送的數據，如果沒有數據，則傳null。
xhr.open('POST',self.uploadURL,true);
xhr.send(formData); //formData為序列化的表單數據
3.定義onreadystatechange函數。XMLHttpRequest 對象的三個重要的屬性:onreadystatechange(服務器響應的函數),readyState(服務器響應的狀態),responseText(服務器返回的數據)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //狀態碼為4時，表示請求已完成
self.cbUploadFile(xhr.responseText); //xhr.responseText表示服務器返回的數據，為JSON文本
}
}
案例截圖：
源代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title> JS AJAX多圖上傳 </title> 6 <meta name="author" content="rainna" /> 7 <meta name="keywords" content="rainna's js lib" /> 8 <meta name="description" content="JS Ajax多圖上傳" /> 9 <style> 10 .m-imglist{margin:20px 0 0;} 11 .m-imglist img{float:left;width:200px;height:200px;margin:0 10px 10px 0;} 12 </style> 13 </head> 14 15 <body> 16 <form name="form" id="form"> 17 <input type="file" multiple /> 18 </form> 19 <div class="m-imglist" id="imglist"></div> 20 21 <script> 22 var uploadPic = { 23 upForm:document.getElementById('form'), 24 uploadIpt:document.getElementsByTagName('input')[0], 25 uploadURL:'http://upload.photo.163.com/upload/usere?sitefrom=lowerwerewog&responsetype=json&uswerinesize=3000x15000x0x100', 26 27 //開始上傳 28 uploadFile:function(event){ 29 var self = this; 30 self.files = event.target.files || event.dataTransfer.files; 31 for(var i=0,l=self.files.length;i<l;i++){ 32 self.doUploadFile(self.files[i]); 33 } 34 }, 35 //執行上傳 36 doUploadFile:function(file){ 37 if(!file) return; 38 var self = this, 39 xhr = new XMLHttpRequest(), //新建xhr對象 40 formData = new FormData(); //FormData()對象用於存放序列化的表單數據 41 formData.append('Filedata', file); 42 43 if(xhr.upload) { 44 //向服務器發送請求 45 xhr.open('POST',self.uploadURL,true); 46 xhr.send(formData); 47 48 xhr.onreadystatechange = function(){ 49 if(xhr.readyState == 4){ //狀態碼為4時，表示請求已完成 50 self.cbUploadFile(xhr.responseText); //xhr.responseText表示服務器返回的數據，為JSON文本 51 } 52 } 53 } 54 }, 55 //上傳回調 56 cbUploadFile:function(text){ 57 var photo,userDef1Url,node; 58 var self = this; 59 photo = JSON.parse(text); 60 if(photo.resultcode == 999){ //成功上傳 61 userDef1Url = photo.userDef1Url; //圖片的url地址 62 node = new Image(); 63 node.src = userDef1Url; 64 } 65 document.getElementById('imglist').appendChild(node); 66 }, 67 //初始化 68 init:function(){ 69 var self = this; 70 self.uploadIpt.onchange = function(event){ 71 self.uploadFile(event); 72 } 73 } 74 }; 75 76 uploadPic.init(); 77 </script> 78 </body> 79 </html>