1. 程式人生 > >基於Bootstrap的多圖片(檔案也可以)上傳、預覽、刪除、縮放、進度...顯示

基於Bootstrap的多圖片(檔案也可以)上傳、預覽、刪除、縮放、進度...顯示

一、引用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; };

說明:可以隱藏自身的上傳按鈕,用表單提交也是可以的。
外掛官網
對外掛的描述部分