上傳圖片，多圖上傳，預(yù)覽功能，js原生無依賴

最近很好奇前端的文件上傳功能，因為公司要求做一個支持圖片預(yù)覽的圖片上傳插件，所以自己搜了很多相關(guān)的插件，雖然功能很多，但有些地方不能根據(jù)公司的想法去修改，而且需要依賴jQuery或Bootstrap庫，所以我就想學(xué)下圖片上傳的原理，試著做一個原生無依賴，而且足夠靈活的圖片上傳插件。話不多說，開整。

1. 大體思路

1.1 首先我們需要考慮用戶如何使用我們的插件。

用戶引入插件代碼后，只需要像下面這樣，設(shè)置一些參數(shù)，然后執(zhí)行一個方法就生成一個圖片上傳組件。

<div id="upload"></div>  // 這是用來生成圖片上傳組件的div

<script>// 設(shè)置參數(shù)var options = {
    path: '/',    // 上傳圖片時指定的地址路徑，類似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í)行生成圖片上傳插件的方法, 第一個參數(shù)是上面提到的準(zhǔn)備生成組件的div選擇器，第二個參數(shù)是設(shè)置的組件信息，執(zhí)行方法后返回一個函數(shù)指針，指向執(zhí)行上傳功能的函數(shù)，通過把執(zhí)行上傳功能的函數(shù)暴露出來，用戶就可以自己控制何時上傳圖片了。var upload = tinyImgUpload('#upload', options);  
</script>

網(wǎng)友評論