form-ajax-post-while-file-upload-is-present

阅读更多

 

很久以前，form的post需要刷新页面。

后来有人发明了ajax，又有人开源了jquery，我们的form可以ajax post而无须刷新页面。
  var url, method, data, element = $('form');
    url = element.attr('action');
    method = element.attr('method');
    data = $(element[0].elements).serializeArray();
  $.ajax({
    url:url,
    type:method,
    data:data
  });
但存在一个问题，不支持带有文件上传的form。
 

   
 

因为，上传的文件对象无法被序列化。。。

这个问题需要新的DTD来解决，于是就有了FormData的对象。
  https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
  XMLHttpRequest Level 2添加了一个新的接口FormData
  利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，
  我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单"，
  比起普通的ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。
  所有主流浏览器的较新版本都已经支持这个对象了，

  比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意！需要设置ajax参数{cache:false,processData:false,contentType:false}

查看ajax的文档 http://www.w3school.com.cn/jquery/ajax_ajax.asp

于是我们又可以愉快地 form-ajax-post 了

  var url, method, data, element = $('form');
    url = element.attr('action');
    method = element.attr('method');
    data = new FormData(element[0]);
  $.ajax({

    cache:false,processData:false,contentType:false,
    url:url,
    type:method,
    data:data

  });