您好,登錄后才能下訂單哦!
經理讓我?guī)?a title="服務器" target="_blank" href="http://www.kemok4.com/">服務器開發(fā)人員開發(fā)一個上傳文件功能界面,我就想著以前使用過bootstrap-fileinput插件進行文件上傳,很不錯。趕緊就擼起來了。
1、下載壓縮包。插件地址https://github.com/kartik-v/bootstrap-fileinput/ ,下載壓縮包解壓之后,拿出fileinput.min.js、fileinput.min.css、和中文需要引用的插件zh.js,因為這款插件默認的語言是英語。把這幾個文件引入進頁面
2、文件的引入順序
3、使用
<div class="upload-wrap"> <input type="file" id="md5File" multiple="multiple" name="test" /> </div>
將其設置為multiple,可以多選文件進行上傳。
js文件操作
$('#md5File').fileinput({ language: 'zh', uploadUrl: 'http://localhost:8080/sign', showCaption: true,//是否顯示被選文件的簡介 showUpload: true,//是否顯示上傳按鈕 showRemove: true,//是否顯示刪除按鈕 showClose: true,//是否顯示關閉按鈕 enctype: 'multipart/form-data', uploadAsync:false, //false 同步上傳,后臺用數(shù)組接收,true 異步上傳,每次上傳一個file,會調用多次接口 layoutTemplates: { actionUpload: ''//就是讓文件上傳中的文件去除上傳按鈕 // actionDelete: '',//去除刪除按鈕 }, browseClass: 'btn btn-primary', maxFileCount: 2, minFileCount : 2, }).on('filebatchuploadsuccess',function(res) { console.log(res); });
需求是讓選擇兩個文件進行上傳,而且只能發(fā)起一次請求,所以這里讓maxFileCount和minFileCount都設置為2,uploadAsync設置為false,就是為了讓兩個文件同步上傳,后臺用數(shù)組一次接收。同步和異步上傳成功結果處理的方法都是不同的
異步上傳錯誤結果處理
$('#uploadfile').on('fileerror', function(event, data, msg) { });
異步上傳成功結果處理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { })
同步上傳錯誤結果處理
$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) { });
同步上傳成功結果處理
$('#uploadfile').on('filebatchuploadsuccess', function(event, data, previewId, index) { });
其實本來不難,但是我對于同步上傳成功結果處理的函數(shù)一直沒有處理對,打斷點也捕捉不到,我也很納悶在做的時候,我在很多地方看到的是如下的處理方法:
我就一直使用$('#uploadfile').on('filepreupload',function(e,data,previewId,index){})
這個方法,后來才恍然大悟,把filepreupload改成了filebatchuploadsuccess,最終才實現(xiàn)了同步上傳成功結果處理。也算是一個小坑,被人誤導,自己也沒有看清楚。
這里面還有一個參數(shù):layoutTemplates,這個參數(shù)是對上傳的那多個文件里面操作
如上圖的紅色圈圈,可以對這幾個icon進行設置
layoutTemplates: { actionUpload: ''//就是讓文件上傳中的文件去除上傳按鈕 // actionDelete: '',//去除刪除按鈕 },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。