使用FormData，進行Ajax請求並上傳文件

前段時間作了個手機端的圖片上傳，爲了用戶體驗，用ajax交互，發現了FromData對象，這裏有詳細解釋https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

如下直接粘貼代碼，這裏使用JQuery，可是老版本的JQuery好比1.2是不支持的，最好使用2.0或更新版本。注：代碼轉自他人blog，感受比本人代碼清晰易懂，故而轉之。

一、Html代碼

 

    <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>  

 

 

二、JQuery代碼

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);
          }
     });
}