最近很好奇前端的文件上傳功能，因?yàn)楣疽笞鲆粋€(gè)支持圖片預(yù)覽的圖片上傳插件，所以自己搜了很多相關(guān)的插件，雖然功能很多，但有些地方不能根據(jù)公司的想法去修改，而且需要依賴jQuery或Bootstrap庫，所以我就想學(xué)下圖片上傳的原理，試著做一個(gè)原生無依賴，而且足夠靈活的圖片上傳插件。話不多說，開整。
1. 大體思路
1.1 首先我們需要考慮用戶如何使用我們的插件。
用戶引入插件代碼后，只需要像下面這樣，設(shè)置一些參數(shù)，然后執(zhí)行一個(gè)方法就生成一個(gè)圖片上傳組件。
<div id="upload"></div> // 這是用來生成圖片上傳組件的div
<script>// 設(shè)置參數(shù)var options = {
path: '/', // 上傳圖片時(shí)指定的地址路徑，類似form變淡的action屬性
onSuccess: function (res) { // 上傳成功后執(zhí)行的方法，res是接收的ajax響應(yīng)內(nèi)容
console.log(res);
},
onFailure: function (res) { // 上傳失敗后執(zhí)行的方法，res是接收的ajax響應(yīng)內(nèi)容
console.log(res);
}
}// 執(zhí)行生成圖片上傳插件的方法, 第一個(gè)參數(shù)是上面提到的準(zhǔn)備生成組件的div選擇器，第二個(gè)參數(shù)是設(shè)置的組件信息，執(zhí)行方法后返回一個(gè)函數(shù)指針，指向執(zhí)行上傳功能的函數(shù)，通過把執(zhí)行上傳功能的函數(shù)暴露出來，用戶就可以自己控制何時(shí)上傳圖片了。var upload = tinyImgUpload('#upload', options);
</script>