bootstrap fileinput組件的使用

組件的下載地址為：https://github.com/kartik-v/bootstrap-fileinput

比較詳細的介紹可參看：http://www.jq22.com/jquery-info5231

下面說一下在使用此組件時候遇到的一些問題，和解決辦法

問題1：在選擇圖片時，無法選擇多個圖片，且第一張圖片選擇后，在選擇第二張圖片時，第一張圖片會被第二章圖片覆蓋，即無法多選圖片。

解決辦法：需要在input中加入multiple="multiple"，且在初始化fileinput配置時，一定加入uploadUrl的設置

問題2：提交多張圖片時只post了一張

解決辦法：fileinput默認是異步上傳的，即uploadAsync: true，你會發現如果你上傳多張圖片，請求就會發送多次，每次只提交一張圖片，如果想一次提交所有圖片，則需要將uploadAsync設置為false。

問題3：使用自帶的上傳按鈕時，如何向后台傳遞額外的參數

解決辦法：在fileinput配置中加入uploadExtraData配置，如下：

uploadExtraData:function (previewId, index) {
                    //向后台傳遞type,nameStr作為額外參數
                    var obj = {};
                    obj.type = "cardno";
                    obj.nameStr = "HL0093"
                    return obj;
                }

 

問題4：如何取消預覽縮略圖上面的查看、上傳、刪除三個小圖片

解決辦法：在fileinput配置中加入layoutTemplates配置，如下：

layoutTemplates :{
            actionDelete:'', //去除上傳預覽的縮略圖中的刪除圖標
            actionUpload:'',//去除上傳預覽縮略圖中的上傳圖片；
            actionZoom:''   //去除上傳預覽縮略圖中的查看詳情預覽的縮略圖標。
        },

 問題5：如何實現自動上傳及上傳成功或者失敗的后的處理。

 解決辦法：如下：

 　　　　　　 }).on("filebatchselected", function(event, files) {
                $(this).fileinput("upload");
            }).on("filebatchuploadsuccess", function(event, data) {
                $("#check2").val(true)
            }).on('fileerror', function(event, data, msg) {  
                console.log('文件上傳失敗！'+msg);
            });

 

 

 

此處附上比較完整的實現代碼

 

 <input class="form-control" type="file" id="cardFiles" multiple="multiple" name="file"/>    

 

<script type="text/javascript">  
       
               
       $(document).ready(function() {
           
            $("#cardFiles").fileinput({  
                  language: 'zh', //設置語言 
                  uploadUrl:'http://localhost/backoa/employee/upload',
                  enctype: 'multipart/form-data',
                  allowedFileExtensions : ['jpg', 'png','bmp','jpeg'],//接收的文件后綴
                  showUpload: false, //是否顯示上傳按鈕
                  showPreview: true, //展前預覽
                  showCaption: true,//是否顯示標題
                  maxFileSize : 10000,//上傳文件最大的尺寸
                  maxFileCount: 10,
                  dropZoneEnabled: false,//是否顯示拖拽區域
                  browseClass: "btn btn-primary", //按鈕樣式
                  uploadAsync: false,
                  allowedPreviewTypes: ['image'],
                  layoutTemplates :{                  
                  　　　　actionUpload:'',//去除上傳預覽縮略圖中的上傳圖片；                 
                  },
                  uploadExtraData:function (previewId, index) {
                    //向后台傳遞type,nameStr作為額外參數
                    var obj = {};
                    obj.type = "card";
                    obj.nameStr = "HL0093"
                    return obj;
                }
            }).on("filebatchselected", function(event, files) {
                $(this).fileinput("upload");
            }).on("filebatchuploadsuccess", function(event, data) {
                $("#check1").val("done");
            }).on('fileerror', function(event, data, msg) {  //一個文件上傳失敗
                console.log('文件上傳失敗！'+msg);
            });
  
       });

 

相關參考：https://blog.csdn.net/zlb_lover/article/details/76548772

 

https://blog.csdn.net/u012526194/article/details/69937741