快捷導(dǎo)航

詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐

更新時(shí)間：2019年03月21日 14:13:46 作者：雨吻蝶

這篇文章主要介紹了詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

經(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具