詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐
經(jīng)理讓我?guī)头?wù)器開(kāi)發(fā)人員開(kāi)發(fā)一個(gè)上傳文件功能界面，我就想著以前使用過(guò)bootstrap-fileinput插件進(jìn)行文件上傳，很不錯(cuò)。趕緊就擼起來(lái)了。
1、下載壓縮包。插件地址https://github.com/kartik-v/bootstrap-fileinput/ ，下載壓縮包解壓之后，拿出fileinput.min.js、fileinput.min.css、和中文需要引用的插件zh.js，因?yàn)檫@款插件默認(rèn)的語(yǔ)言是英語(yǔ)。把這幾個(gè)文件引入進(jìn)頁(yè)面
2、文件的引入順序
- 引入bootstrap.min.css
- 引入fileinput.min.css
- 引入jquery，版本最好2以上
- 引入bootstrap.min.js
- 引入fileinput.min.js
- 引入中文插件zh.js
3、使用
<div class="upload-wrap"> <input type="file" id="md5File" multiple="multiple" name="test" /> </div>
將其設(shè)置為multiple，可以多選文件進(jìn)行上傳。
js文件操作
$('#md5File').fileinput({
language: 'zh',
uploadUrl: 'http://localhost:8080/sign',
showCaption: true,//是否顯示被選文件的簡(jiǎn)介
showUpload: true,//是否顯示上傳按鈕
showRemove: true,//是否顯示刪除按鈕
showClose: true,//是否顯示關(guān)閉按鈕
enctype: 'multipart/form-data',
uploadAsync:false, //false 同步上傳，后臺(tái)用數(shù)組接收，true 異步上傳，每次上傳一個(gè)file,會(huì)調(diào)用多次接口
layoutTemplates: {
actionUpload: ''//就是讓文件上傳中的文件去除上傳按鈕
// actionDelete: '',//去除刪除按鈕
},
browseClass: 'btn btn-primary',
maxFileCount: 2,
minFileCount : 2,
}).on('filebatchuploadsuccess',function(res) {
console.log(res);
});
需求是讓選擇兩個(gè)文件進(jìn)行上傳，而且只能發(fā)起一次請(qǐng)求，所以這里讓maxFileCount和minFileCount都設(shè)置為2，uploadAsync設(shè)置為false，就是為了讓兩個(gè)文件同步上傳，后臺(tái)用數(shù)組一次接收。同步和異步上傳成功結(jié)果處理的方法都是不同的
異步上傳錯(cuò)誤結(jié)果處理
$('#uploadfile').on('fileerror', function(event, data, msg) {
});
異步上傳成功結(jié)果處理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
})
同步上傳錯(cuò)誤結(jié)果處理
$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
});
同步上傳成功結(jié)果處理
$('#uploadfile').on('filebatchuploadsuccess', function(event, data, previewId, index) {
});
其實(shí)本來(lái)不難，但是我對(duì)于同步上傳成功結(jié)果處理的函數(shù)一直沒(méi)有處理對(duì)，打斷點(diǎn)也捕捉不到，我也很納悶在做的時(shí)候，我在很多地方看到的是如下的處理方法：
我就一直使用$('#uploadfile').on('filepreupload',function(e,data,previewId,index){})這個(gè)方法，后來(lái)才恍然大悟，把filepreupload改成了filebatchuploadsuccess，最終才實(shí)現(xiàn)了同步上傳成功結(jié)果處理。也算是一個(gè)小坑，被人誤導(dǎo)，自己也沒(méi)有看清楚。
這里面還有一個(gè)參數(shù)：layoutTemplates，這個(gè)參數(shù)是對(duì)上傳的那多個(gè)文件里面操作
如上圖的紅色圈圈，可以對(duì)這幾個(gè)icon進(jìn)行設(shè)置
layoutTemplates: {
actionUpload: ''//就是讓文件上傳中的文件去除上傳按鈕
// actionDelete: '',//去除刪除按鈕
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Bootstrap Fileinput文件上傳組件用法詳解
- JS文件上傳神器bootstrap fileinput詳解
- Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
- Bootstrap中的fileinput 多圖片上傳及編輯功能
- Bootstrap的fileinput插件實(shí)現(xiàn)多文件上傳的方法
- bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
- 基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
- Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置
- BootStrap fileinput.js文件上傳組件實(shí)例代碼
- Bootstrap FileInput實(shí)現(xiàn)圖片上傳功能
相關(guān)文章
微信小程序中使用自定義圖標(biāo)（阿里icon）的方法
這篇文章主要介紹了微信小程序中使用自定義圖標(biāo)（阿里icon）的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
ES6 Generator函數(shù)的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Generator函數(shù)的應(yīng)用,結(jié)合實(shí)例形式分析了ES6 Generator函數(shù)異步操作與異常捕獲相關(guān)使用技巧,需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了GoJs基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
JavaScript實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
bootstrap自定義樣式之bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能
bootstrap自帶的響應(yīng)式導(dǎo)航欄是向下滑動(dòng)的，有時(shí)滿足不了個(gè)性化的需求，需要做一個(gè)類似于android drawerLayout 側(cè)滑的菜單，這就是我要實(shí)現(xiàn)的bootstrap自定義側(cè)滑菜單。接下來(lái)通過(guò)本文給大家介紹bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能，感興趣的朋友一起看看吧2018-09-09
JavaScript監(jiān)聽(tīng)觸摸事件代碼實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)觸摸事件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
json_decode 索引為數(shù)字時(shí)自動(dòng)排序問(wèn)題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù)，結(jié)果順序不對(duì)，經(jīng)debug調(diào)試，發(fā)現(xiàn)是json_encode 函數(shù)的問(wèn)題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03
微信小程序記錄用戶移動(dòng)軌跡的實(shí)戰(zhàn)記錄
最近遇到一個(gè)小程序的開(kāi)發(fā)需求,直接可以通過(guò)小程序就記錄運(yùn)動(dòng)軌跡,所以這篇文章主要給大家介紹了關(guān)于微信小程序記錄用戶移動(dòng)軌跡的相關(guān)資料,需要的朋友可以參考下2021-08-08
眾所周知，我們web開(kāi)發(fā)人員痛恨IE瀏覽器，因?yàn)镮E不支持標(biāo)準(zhǔn)，標(biāo)準(zhǔn)外的默認(rèn)行為又和其他瀏覽器經(jīng)常不一致，所以我們?cè)谧鲰?xiàng)目的時(shí)候，經(jīng)常需要專門針對(duì)IE來(lái)做些文章，當(dāng)然對(duì)于referer也不例外，今天我們就來(lái)看下如何讓referer兼容主流瀏覽器2014-11-11
關(guān)于javaScript注冊(cè)click事件傳遞參數(shù)的不成功問(wèn)題
在javaScript中給一個(gè)html元素注冊(cè)click事件處理函數(shù)時(shí)，比如給該處理函數(shù)傳3個(gè)參數(shù)?？墒遣还苁鞘褂孟旅婺欠N方式都不能給事件處理函數(shù)傳遞參數(shù)2014-07-07