基於Bootstrap的多圖片(檔案也可以)上傳、預覽、刪除、縮放、進度...顯示
阿新 • • 發佈:2018-12-30
一、引用js、css
二、Html程式碼
<input id="myFile" type="file" name="myFile" multiple class="file-loading">
對,你沒看錯。只需要這一行核心程式碼就可以了。選擇multiple屬性支援多圖上傳
三、JS程式碼
$(function () {
//0.初始化fileinput
var oFileInput = new FileInput();
oFileInput.Init("myFile", "/afterSale/uplode/photo" );
});
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控制元件(第一次初始化)
oFile.Init = function (ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上傳控制元件的樣式
control.fileinput({
language: 'zh' , //設定語言
uploadUrl: uploadUrl, //上傳的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的檔案字尾
//showUploadedThumbs:false,
// uploadClass: 'hidden',
showUpload: false, //是否顯示上傳按鈕
showCaption: false,//是否顯示標題
browseClass: "btn btn-info" , //按鈕樣式
dropZoneEnabled: false,//是否顯示拖拽區域
//minImageWidth: 150, //圖片的最小寬度
//minImageHeight: 150,//圖片的最小高度
//maxImageWidth: 150,//圖片的最大寬度
//maxImageHeight: 150,//圖片的最大高度
maxFileSize: 2048,//單位為kb,如果為0表示不限制檔案大小
maxFileCount: 2, //表示允許同時上傳的最大檔案個數
minFileCount: 1,
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}!",
fileActionSettings : {
showUpload: false,
//showRemove: false
showZoom:false
}
});
//匯入檔案上傳完成之後的事件
$("#myFile").on("fileuploaded", function (event, data, previewId, index) {
alert(data.response.code);
// $("#divControl").hide();
});
}
return oFile;
};