Ajax serialize()提交form表单不能上传file类型怎么办？

前台form表单的提交方式有很多种，例如：
1. form表单submit直接提交的方法
2. Ajax提交的方法
3. jquery提交的方法
4. 原生js提交的方法

每一种方法都有它的优势和不足，有的简单直接，有的写起来复杂，但用起来顺手，最近项目中遇到了一个Ajax 表单提交问题，在这里总结一下ajax提交的两种方式：

1.serialize() 方法：

通过序列化表单值，创建 URL 编码文本字符串。我们可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
所用到的语法为：

$("form").serialize()

这里的$(“form”)操作对象是代表表单元素集合的 jQuery 对象，而不是js对象。

提交方法的代码段：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

最终序列化后，表单中数据会一下面这种方式提交到后台：a=1&b=2&c=3&d=4&e=5
这种方式处理表单时所适用的input标签类型是有限的，只适用于一些常用的类型例如text、checkbox、select、date等等，但是对于file文件类型的input框并不适用，那我们在用到ajax提交方式的时候应该如何提交file类型的input框数据呢?

2.封装FormData 对象，直接用$.ajax提交

论坛上有人提及到FormData的封装方式，将form表单中的内容封装成formdata的数据格式
FormData 对象可以把form中所有表单元素的name与value组成一个queryString，提交到后台，在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

FormData的使用方法也是非常简单，直接传入form表单对象即可，如下：

var form = $('#form1');  
var formdata = new FormData(form);  

使用这种方式将数据封装后，file类型的文件数据即可以键值对的方式封装在formdata中，然后用ajx提交，方法如下：

 $.ajax({  
        type : "POST",  
        url : "houtai/123.do",  
        data : formData,
        async: false,  
        cache: false,  
        contentType: false,  
        processData: false,
        success : function(msg) {  
            if(msg){
            alert('提交成功！');
            } 
        }  
});  

有一点需要注意的是，以formdata的方式提交时需要添加async: false, 同步，否则后台无法接收到前台传过来的file文件数据，这样的提交方式，既可以提交任何一种type类型标签，又可以在提交之后得到返回结果，方便快捷又实用。

关于form表单提交的方式还有很多很多，本文只是关于ajax的两种提交方式总结，希望以后还可以遇到更好用的提交方式或者提交插件。

好久没写总结博客了，希望2018年可以坚持下去！！