溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
基礎的定義及使用方法網上有很多不再概述，這兒主要寫本人所使用項目時碰到的一些問題及解決方案
注：本人使用此插件主要用來上傳圖片之用，插件其他上傳文件沒有涉及
一、上傳最小數量問題
通過查閱其他資料可知配置中有兩個方法
minFileCount:4,//表示允許同時上傳的最小文件個數
maxFileCount: 10, //表示允許同時上傳的最大文件個數
這兩個方法都可在插件官網的api里查到，不過有個問題
minFileCount在使用其自帶上傳方法時才會出現提示
maxFileCount在選擇文件超過上限時就會出現提示
showUpload: true,//是否顯示上傳按鈕
具體原因可能是作者還沒有修改吧，或許以后的版本會解決這個問題
二、不使用插件自帶上傳使用form表單提交問題
本人所做項目沒有使用插件自帶的上傳功能而直接使用form表單進行提交
如果是表單提交需要注意以下問題
1.form里必須添加enctype="multipart/form-data"
2.如果是單個圖片后臺不用接收數組形式，或者可以參考如下方法
for (MultipartFile imgreturn : file) {
/*不添加如下代碼會將新添加的內容覆蓋掉*/
actinfo = new HashMap<String,Object>();
if (!imgreturn.isEmpty()) {
upImg =FileUtil.upload(imgreturn);
}
}
來接收前臺傳過來的數據，以上部分代碼有刪改，保存文件的方法就不予展示了
三、頁面接收傳遞數據使用插件接收問題
此插件是可以進行后臺數據傳遞預覽功能的，不過添加新數據后會出現覆蓋掉預覽數據問題，所以不建議使用本插件進行數據修改操作
預覽后臺相關代碼
// 預覽圖片json數據組
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;
// 與上面 預覽圖片json數據組 對應的config數據
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向后臺傳遞的參數
width: '120px',
};
preConfigList[i] = tjson;
}
$('#txt_fileup').fileinput({
language: 'zh', //設置語言
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: "選擇上傳的文件數量 超過允許的最大數值！",
/* initialPreview: previewJson,
initialPreviewConfig: preConfigList */
}).off('filepreupload').on('filepreupload', function() {
}).on("fileuploaded", function(event, outData) {
});
四、使用到的插件方法調用
為了解決上一個問題層考慮使用調用插件的方法來進行判斷，不貴最后失敗了，以下是使用過的調用方法
$('#txt_fileup').on('filedeleted', function(event, key) {
/* 觸發刪除方法 */
});
$('#txt_fileup').on('fileselect', function(event, key) {
/* 觸發選擇方法 */
});
以上所述是小編給大家介紹的bootstrap fileinput 插件使用項目總結(經驗)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
