詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐
經(jīng)理讓我?guī)头?wù)器開發(fā)人員開發(fā)一個(gè)上傳文件功能界面，我就想著以前使用過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ù)一直沒有處理對(duì)，打斷點(diǎn)也捕捉不到，我也很納悶在做的時(shí)候，我在很多地方看到的是如下的處理方法：
我就一直使用$('#uploadfile').on('filepreupload',function(e,data,previewId,index){})這個(gè)方法，后來(lái)才恍然大悟，把filepreupload改成了filebatchuploadsuccess，最終才實(shí)現(xiàn)了同步上傳成功結(jié)果處理。也算是一個(gè)小坑，被人誤導(dǎo)，自己也沒有看清楚。
這里面還有一個(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)文章
下面就結(jié)合我自己的體會(huì)和所學(xué)習(xí)的東東和大家一起來(lái)學(xué)習(xí)在JS中如何使用面向?qū)ο蟮木幊獭?/div> 2011-08-08
JavaScript callback回調(diào)函數(shù)用法實(shí)例分析
這篇文章主要介紹了JavaScript callback回調(diào)函數(shù)用法,結(jié)合實(shí)例形式分析了callback回調(diào)函數(shù)的概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了關(guān)于JS中的作用域中的問題思考分享，scope和?closure是?javascript中兩個(gè)非常關(guān)鍵的概念，前者JS用多了還比較好理解而且容易體會(huì)到，而?closure就不一樣了。這玩意是真的很容易迷糊,需要的朋友可以參考下2022-04-04
JavaScript中函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別詳解
可能很多朋友只知道兩種聲明方式一個(gè)是函數(shù)聲明一個(gè)是函數(shù)表達(dá)式，具體有什么不同沒能說得很好。事實(shí)上，JavaScript的解析器對(duì)函數(shù)聲明與函數(shù)表達(dá)式并不是一視同仁地對(duì)待的。下面看看這兩者到底有什么不同。2016-08-08
JavaScript 學(xué)習(xí)點(diǎn)滴記錄
HTML DOM (Document Object Model文檔對(duì)象模型) DOM是一種與瀏覽器，平臺(tái)，語(yǔ)言的接口，使得你可以訪問頁(yè)面其他的標(biāo)準(zhǔn)組件. DOM是以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或信息片斷的集合.2009-04-04
Javascript中eval函數(shù)的詳細(xì)用法與說明
Javascript中eval函數(shù)的詳細(xì)用法與說明...2007-03-03
今天小編就為大家分享一篇layui監(jiān)聽單元格編輯前后交互的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
這篇文章主要介紹了JS實(shí)現(xiàn)彈性漂浮效果的廣告代碼,涉及javascript動(dòng)態(tài)操作圖片彈性運(yùn)動(dòng)效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果
這篇文章主要為大家詳細(xì)介紹了hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)?lái)一篇省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06最新評(píng)論