jquery Ajax serialize()表單進行序列化方式上傳檔案

通過Ajax serialize()表單進行序列化方式上傳檔案，使用FormData進行Ajax請求

通過傳統的form表單提交的方式上傳檔案：

代碼如下

複製代碼

<form id= "uploadForm" action= /cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">       <h1 >測試通過Rest介面上傳檔案 </h1>       <p >指定檔案名稱： <input type ="text" name="filename" /></p>       <p >上傳檔案： <input type ="file" name="file" /></p>       <p >關鍵字1： <input type ="text" name="keyword" /></p>       <p >關鍵字2： <input type ="text" name="keyword" /></p>       <p >關鍵字3： <input type ="text" name="keyword" /></p>       <input type ="submit" value="上傳"/>  </form>

serialize()對form表單進行序列化提交

不過傳統的form表單提交會導致頁面重新整理，但是在有些情況下，我們不希望頁面被重新整理，這種時候我們都是使用Ajax的方式進行請求的：

代碼如下	複製代碼
$.ajax({       url : "http://localhost:8080/STS/rest/user",       type : "POST",       data : $( '#postForm').serialize(),       success : function(data) {            $( '#serverResponse').html(data);       },       error : function(data) {            $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);       }  });

如上，通過$(‘#postForm’).serialize()可以對form表單進行序列化，從而將form表單中的所有參數傳遞到服務端。

但是上述方式，只能傳遞一般的參數，上傳檔案的檔案流是無法被序列化並傳遞的。
不過如今主流瀏覽器都開始支援一個叫做FormData的對象，有了這個FormData，我們就可以輕鬆地使用Ajax方式進行檔案上傳了。

FormData是什麼呢？我們來看看Mozilla上的介紹

XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData對象,我們可以通過JavaScript用一些索引值對來類比一系列表單控制項,我們還可以使用XMLHttpRequest的send()方法來非同步提交這個”表單”.比起普通的ajax,使用FormData的最大優點就是我們可以非同步上傳一個二進位檔案.
所有主流瀏覽器的較新版本都已經支援這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

使用FormData，進行Ajax請求並上傳檔案

代碼如下

複製代碼

<form id= "uploadForm">        <p >指定檔案名稱： <input type="text" name="filename" value= ""/></p >        <p >上傳檔案： <input type="file" name="file"/></ p>        <input type="button" value="上傳" onclick="doUpload()" />  </form> function doUpload() {       var formData = new FormData($( "#uploadForm" )[0]);       $.ajax({            url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,            type: 'POST',            data: formData,            async: false,            cache: false,            contentType: false,            processData: false,            success: function (returndata) {                alert(returndata);            },            error: function (returndata) {                alert(returndata);            }       });  }