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