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

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

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

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

注：本人使用此插件主要用來(lái)上傳圖片之用，插件其他上傳文件沒(méi)有涉及

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

通過(guò)查閱其他資料可知配置中有兩個(gè)方法

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

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

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

maxFileCount在選擇文件超過(guò)上限時(shí)就會(huì)出現(xiàn)提示

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

具體原因可能是作者還沒(méi)有修改吧，或許以后的版本會(huì)解決這個(gè)問(wèn)題

二、不使用插件自帶上傳使用form表單提交問(wèn)題

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

如果是表單提交需要注意以下問(wèn)題

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

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

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

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

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

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

預(yù)覽后臺(tái)相關(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ù)組 對(duì)應(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向后臺(tái)傳遞的參數(shù)  
            width: '120px',   
            };  
      preConfigList[i] = tjson;  
     }  
    $('#txt_fileup').fileinput({  
   language: 'zh', //設(shè)置語(yǔ)言 
       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ù)量 超過(guò)允許的最大數(shù)值！",  
       /* initialPreview: previewJson,  
       initialPreviewConfig: preConfigList */  
     }).off('filepreupload').on('filepreupload', function() {  
     }).on("fileuploaded", function(event, outData) {  
     });

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

為了解決上一個(gè)問(wèn)題層考慮使用調(diào)用插件的方法來(lái)進(jìn)行判斷，不貴最后失敗了，以下是使用過(guò)的調(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))，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: