使用jquery的ajax提交文件上傳

以前的項目大多的使用jquery的插件來進行文件上傳，對於就只引用jquery而不使用插件來上傳文件之前未有寫過，最近項目里有寫到和用到，就記錄一下，以后方便查找。

提示：存在瀏覽器皆容問題，謹慎使用。

HTML代碼：

<form id="infoLogoForm" enctype='multipart/form-data'>
    <div class="cnt-updateWrapper" style="display: none">
        <div>
            <div id="loadImg" class="cnt-img-content">
                <img id="logo" class="ctn-uploadImg" src="${ctx}/static/images/u8385.png" draggable="false">
                <div id="licenseBox" class="ctn-licence">
                    點擊我上傳圖片
                    <input type="file" id="ctn-input-file" name="file" accept="image/*" style="height:40px">
                </div>
            </div>
        </div>
        <div>上傳成功后，請點擊保存后才能生效</div>
        <div>
            <button id="infoLogoSaveBt" class="btn btn-default cnt-save" type="button">保存</button>
        </div>
    </div>
</form>

JS代碼：

var uploading = false;

$("#ctn-input-file").on("change", function(){
    if(uploading){
        alert("文件正在上傳中，請稍候");
        return false;
    }
    $.ajax({
        url: ctx + "/xxx/upload",
        type: 'POST',
        cache: false,
        data: new FormData($('#infoLogoForm')[0]),
        processData: false,
        contentType: false,
        dataType:"json",
        beforeSend: function(){
            uploading = true;
        },
        success : function(data) {
            if (data.code == 1) {
                $("#logo").attr("src", data.msg);
            } else {
                showError(data.msg);
            }
            uploading = false;
        }
    });
});

其中關鍵要素：

1、contentType:

(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數情況。如果你明確地傳遞了一個content-type給 $.ajax() 那么他必定會發送給服務器（即使沒有數據要發送）

2、processData

(默認: true) 默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。

3、FormData

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.

瀏覽器的兼容情況：

桌面瀏覽器：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	7+	4.0 (2.0)	10+	12+	5+
支持filename參數	(Yes)	22.0 (22.0)	?	?	?