1. 模仿表單提交：

• 建立一個FormData物件

• 呼叫它的 append() 方法來新增欄位

// formData.append(key, value);
var fd = new FormData();
fd.append("username", "Groucho");

2. 使用 FileReader 物件進行預覽

// 預覽
var reader = new FileReader();
reader.onload = (function (file) {
    return function (e) {
        var datainfo = this.result;
        $("#IDcardShow").css({
             "background": "url(" + datainfo + ") center center no-repeat",
             "background-size": "cover"
        });
   };
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
 

3. 模擬表單提交圖片

// 1. 建立一個空的fd物件
var fd = FormData();
// 2. 點選上傳圖片
$("input[type=file]").on("change", function (e) {
    var $this = $(this);
    // 檢測檔案大小 1024*1024=1048576(1M)
    if (e.target.files[0].size >= 1048576) {
        BJUI.alertmsg("warn", "上傳圖片大小不得超過1M");
        return false;
    }
    // 預覽圖片
    var reader = new FileReader();
    reader.onload = (function (file) {
        return function (e) {
             var datainfo = this.result;
             $("#IDcardShow").css({
                  "background": "url(" + datainfo + ") center center no-repeat",
                  "background-size": "cover"
             });
        };
    })(e.target.files[0]);
    reader.readAsDataURL(e.target.files[0]);
    // 新增到fd物件中等待提交
    fd.append("cert_scan", e.target.files[0]);
});
// 3. 提交
$.ajax({
    type: "post",
    url: "xxxx/xxxxx",
    data: fd,
    dataType: "json",
    processData: false,  // processData和contentType需設定為false
    contentType: false,
    success: function (data) {
        infor_notice(data.code, data.message);
        if (data.code == "1") {
            BJUI.dialog('closeCurrent');
        } else {
            this.text("確認上傳");
            $this.attr("disabled", false);
        }
    }
})
 

4. FormData的相容性

IE8不支援FormData, IE10才支援，因此此方法不相容IE10以下的IE瀏覽器，可以使用jquery.form.js支援的ajaxsubmit進行檔案上傳 。