以前的專案大多的使用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的最大優點就是我們可以非同步上傳一個二進位制檔案.

瀏覽器的相容情況：

桌面瀏覽器：

轉自： https://www.cnblogs.com/henuyuxiang/p/6656001.html