ajax传输数据-FormData

通过传统的form表单提交的方式上传

<form id= "uploadForm" action= "http://localhost:8080/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>  

通过form表单上传文件，action后会执行页面跳转，但是有些时刻，不需要跳转页面，这时候需要ajax方式进行上传

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

通常我们提交时（使用submit button）时，会将表格元素的name与value组成一个queryString，提交到后台，这对jquery来说，就是serialize方法。

通过以上代码的serialize方法将form表单序列化，最后将form表单中的所有参数提交到服务器。

以上方式属于上传简单的内容，如果要上传文件，就需要使用FormData

FormData

使用FormData的优点：可以异步上传一个二进制文件

                                已经被大多数浏览器所支持

创建一个FormData对象

var obj = new FormData();

W3c提供三种方案来创建或者修改FormData

方案1: 创建一个空的formData对象，并且添加键值对

var obj = new FormData();

obj.append('name1','LiuYang');

方案2：取得form对象，将其作为参数传入到FormData当中

var obj = document.getElementById('form');

var objForm = new FormData(obj);

方案3: 利用form元素的getFormData方法生成

var obj = document.getElementById('form');

var objForm = obj.getFormData();

AJAX通过FormData上传文件

 1.  通过form表单初始化formData对象上传文件

     html代码

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

     js代码 

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

   注意事项：

        1  enctype="multipart/form-data"

2 给form表单添加id 初始化FormData，这种初始化直接将form表单里的内容全部传到服务器，也可以使用

append方法指定传输内容

3 processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data

          4  contentType与form表单里的enctype有关，可以设置contentType内容取代enctype内容，详情参考链接点击打开链接

        

2  不通过form表单的FormData上传

    html代码 

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

    js代码  

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

   注意事项：  注意初始化方式，直接指定了文件   $('#file')[0].files[0]