使用FormData，进行Ajax请求并上传文件

前段时间做了个手机端的图片上传，为了用户体验，用ajax交互，发现了FromData对象，这里有详细解释https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

以下直接粘贴代码，这里使用JQuery，但是老版本的JQuery比如1.2是不支持的，最好使用2.0或更新版本。注：代码转自他人blog，感觉比本人代码清晰易懂，故而转之。

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

 

 

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