使用FormData上传文件

传统的处理方式：

html

<form id="testForm" method="post" action="xxxx.json">
   <input type="text" name="input1" value="test1"/>
   <input type="text" name="input2" value="test2"/>
   <input type="file" name="uploadfile">
   <input type="submit"/>
</form>

提交表单后，form会跳转到xxxx.json之类的页面，为了避免跳转，会在页面放一个隐藏的iframe，指定form的target为iframe

<form id="testForm" method="post" action="xxxx.json" target="testIframe">
   <input type="text" name="input1" value="test1"/>
   <input type="text" name="input2" value="test2"/>
   <input type="file" name="uploadfile">
   <input type="submit"/>
</form>





<iframe name="testIframe" style="display:none"></iframe>

有了FormData后，结合jquery框架，可以这样做：

<form id="testForm" method="post" enctype="multipart/form-data">
   <input type="text" name="input1" value="test1"/>
   <input type="text" name="input2" value="test2"/>
   <input type="file" name="uploadfile">
</form>





<script>
//提交事件
var submit = function(){
    var $form = $('#testForm');
    var newFormData = new FormData($form.get(0));
    $.ajax({
      url: 'xxxx.json',
      type: 'POST',
      data: newFormData,
      processData: false, // 告诉jQuery不要去处理发送的数据
      contentType: false, // 告诉jQuery不要去设置Content-Type请求头
      success: function(result){
         //处理取得的result
      }
    });
}    
</script>

这样可以少写些HTML元素，不需要通过iframe这种曲线救国的方式。

参考：

认识FormData
使用FormData