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的兩種提交方式總結，希望以后還可以遇到更好用的提交方式或者提交插件。