使用input[type=file]原生實現圖片的預覽和上傳
阿新 • • 發佈:2019-01-08
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進行檔案上傳 。