bootstrap fileinput 插件使用項(xiàng)目總結(jié)(經(jīng)驗(yàn))

更新時間：2017年02月22日 15:47:46 作者：優(yōu)榮月華

這篇文章主要介紹了bootstrap fileinput 插件使用項(xiàng)目總結(jié),是小編日常碰到的問題及解決方法，需要的朋友可以參考下

基礎(chǔ)的定義及使用方法網(wǎng)上有很多不再概述，這兒主要寫本人所使用項(xiàng)目時碰到的一些問題及解決方案

注：本人使用此插件主要用來上傳圖片之用，插件其他上傳文件沒有涉及

一、上傳最小數(shù)量問題

通過查閱其他資料可知配置中有兩個方法

minFileCount:4,//表示允許同時上傳的最小文件個數(shù)
maxFileCount: 10, //表示允許同時上傳的最大文件個數(shù)

這兩個方法都可在插件官網(wǎng)的api里查到，不過有個問題

minFileCount在使用其自帶上傳方法時才會出現(xiàn)提示

maxFileCount在選擇文件超過上限時就會出現(xiàn)提示

showUpload: true,//是否顯示上傳按鈕

具體原因可能是作者還沒有修改吧，或許以后的版本會解決這個問題

二、不使用插件自帶上傳使用form表單提交問題

本人所做項(xiàng)目沒有使用插件自帶的上傳功能而直接使用form表單進(jìn)行提交

如果是表單提交需要注意以下問題

1.form里必須添加enctype="multipart/form-data"

2.如果是單個圖片后臺不用接收數(shù)組形式，或者可以參考如下方法

for (MultipartFile imgreturn : file) { 
/*不添加如下代碼會將新添加的內(nèi)容覆蓋掉*/ 
actinfo = new HashMap<String,Object>(); 
if (!imgreturn.isEmpty()) { 
upImg =FileUtil.upload(imgreturn); 
} 
}

來接收前臺傳過來的數(shù)據(jù)，以上部分代碼有刪改，保存文件的方法就不予展示了

三、頁面接收傳遞數(shù)據(jù)使用插件接收問題

此插件是可以進(jìn)行后臺數(shù)據(jù)傳遞預(yù)覽功能的，不過添加新數(shù)據(jù)后會出現(xiàn)覆蓋掉預(yù)覽數(shù)據(jù)問題，所以不建議使用本插件進(jìn)行數(shù)據(jù)修改操作

預(yù)覽后臺相關(guān)代碼

// 預(yù)覽圖片json數(shù)據(jù)組  
  var preList = new Array();  
     for ( var i = 0; i < reData.length; i++) {  
       var img = null; 
       img = reData[i].activityimg; 
        // 圖片類型  
        preList[i]= "<img width='120px' src=\'"+img+"\' class=\"file-preview-image\">";  
     }  
     var previewJson = preList;   
    // 與上面 預(yù)覽圖片json數(shù)據(jù)組 對應(yīng)的config數(shù)據(jù)  
  var preConfigList = new Array();  
     for ( var i = 0; i < reData.length; i++) {  
      var array_element = reData[i];  
      var tjson = { 
        caption: reData[i].activityno, // 展示的文件名  
        url:'imgdelete', // 刪除url  
            key: reData[i].activityno, // 刪除是Ajax向后臺傳遞的參數(shù)  
            width: '120px',   
            };  
      preConfigList[i] = tjson;  
     }  
    $('#txt_fileup').fileinput({  
   language: 'zh', //設(shè)置語言 
       uploadUrl: 'activityupdate',  
       uploadAsync:false,  
       allowedFileExtensions: ['jpg', 'gif', 'png','jpeg'],//接收的文件后綴 
       showCaption: true,  
       showUpload: false,//是否顯示上傳按鈕  
       showRemove: false,//是否顯示刪除按鈕  
       showCaption: true,//是否顯示輸入框  
       showPreview:true, 
       showCancel:true,  
       dropZoneEnabled: false, 
       minFileCount:4, 
       maxFileCount: 10,  
       initialPreviewShowDelete:true,  
       msgFilesTooMany: "選擇上傳的文件數(shù)量 超過允許的最大數(shù)值！",  
       /* initialPreview: previewJson,  
       initialPreviewConfig: preConfigList */  
     }).off('filepreupload').on('filepreupload', function() {  
     }).on("fileuploaded", function(event, outData) {  
     });

四、使用到的插件方法調(diào)用

為了解決上一個問題層考慮使用調(diào)用插件的方法來進(jìn)行判斷，不貴最后失敗了，以下是使用過的調(diào)用方法

$('#txt_fileup').on('filedeleted', function(event, key) {  
/* 觸發(fā)刪除方法 */ 
});  
 $('#txt_fileup').on('fileselect', function(event, key) { 
 /* 觸發(fā)選擇方法 */ 
  });

以上所述是小編給大家介紹的bootstrap fileinput 插件使用項(xiàng)目總結(jié)(經(jīng)驗(yàn))，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: