使用ajax上傳表單（帶文件）

在使用form表單的時候上傳文件+表單，會使得頁面跳轉，而在某些時候不希望跳轉，只變化頁面中的局部信息

通過查找資料，可以使用FormData進行ajax操作。

FormData介紹：XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.

<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]);  // 要求使用的html對象
     $.ajax({  
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: true,  
          // 下面三個參數要指定，如果不指定，會報一個JQuery的錯誤 
　　　　　　cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
} 

通過上面代碼就可實現ajax提交帶文件的form表單信息。

FormData還可以使用純的js方式編寫。

構造函數

new FormData (optional HTMLFormElement form)

參數

form

(可選) 一個HTML表單元素,可以包含任何形式的表單控件,包括文件輸入框.

方法

append()

給當前FormData對象添加一個鍵/值對.

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

參數值

name

字段名稱.

value

字段值.可以是,或者一個字符串,如果全都不是,則該值會被自動轉換成字符串.

filename(可選)

　　  指定文件的文件名,當 value參數被指定為一個 Blob對象或者一個 File對象時,該文件名會被發送到服務器上,對於 Blob對象來說,這個值默認為"blob".

后端接收方法中，參數

@RequestParam(value = "file", required = false)MultipartFile file

如果在上傳文件時，返回值帶 

<pre style="word-wrap:break-word;white-space:prewrap;">xxx</pre>

在后台設置response可去點標簽<pre>

response.setContentType("text/html; charset=utf-8");