最近使用了bootstrap-fileinput插件，插件本身寫的還不錯，就是文檔有點看不懂，語言邏輯畢竟不是中國人寫的，自己用了一段時間，整理一下
附官網文檔地址：http://www.bootstrap-fileinput.com/options.html
需要引入的bootstrap樣式以及js請自行查找，本處不在復述。
<div class="form-group"> <label class="col-sm-2 control-label">圖片:</label> <div class="col-sm-4"> <input type="file" id="imageFiles" name="imageFiles" accept="image/*" multiple> </div>
</div>
multiple 這是屬性代表的是多文件上傳，如果去掉，那么只能上傳一個文件
/*js代碼初始化*/
$("#imageFiles").fileinput({ /*以下三個屬性是設置初始化動態加載，*/ initialPreviewAsData: true,//允許動態獲取數據預覽 initialPreview:[
'localhost/image1',
'localhost/image2',
],//動態加載圖片地址url,可以填寫多個使用','隔開，我是通過c標簽forEach循環的地址 initialPreviewConfig: [ {
type:'audio',//這個設置的是預加載的類型 可以是audio video text其他的類型，我沒找到
filetype:'audio/mp3'，//設置更加具體的預覽類型
caption:'123',個初始化預覽文件的標題或者文件名 url: '/musicTheory/ajaxDeleteImage',//ajax刪除這個文件第url extra: {id: '8456456'}//給url傳入的參數以及名稱 },//對應'localhost/image1'
{
url: '/musicTheory/ajaxDeleteImage', extra: {id: '${musicTheoryImage.id}'} },//對應'localhost/image2'
],//該標簽是動態加載的配置項，是以數組的形式,每個數組分別對應initialPreview中的圖片（按照順序） uploadUrl:"/upload/musicTheoryUploadImage", //異步上傳接受請求地址 uploadAsync : true, //默認異步上傳 showCancel:false,//是否顯示文件名 initialPreviewShowDelete:true,//顯示圖片上面的刪除按鈕 overwriteInitial:false,//動態加載圖片之后，在重新上傳新的圖片的時候是否清除動態加載的圖片默認是true 清除，false不清除 showUpload : false, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : false, //顯示移除按鈕,跟隨文本框的那個 showCaption : true,//是否顯示標題,就是那個文本框 showPreview : true, //是否顯示預覽,不寫默認為true dropZoneEnabled : true,//是否顯示拖拽區域，默認不寫為true，但是會占用很大區域 showUploadedThumbs:false,//上傳完畢之后，清理預覽框中的圖片，默認false清理*/ maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小 minFilesNum:1,//最小上傳圖片個數 maxFilesNum:10,//最大上傳圖片個數 //minFileCount: 0, maxFileCount : 10, //表示允許同時上傳的最大文件個數 //autoReplace : false,//是否自動替換當前圖片，設置為true時，再次選擇文件，會將當前的文件替換掉。 enctype : 'multipart/form-data', validateInitialCount : true,//驗證minFileCount和maxFileCount時是否包含初始預覽文件計數（服務器上載的文件）。默認為false browseOnZoneClick:true, previewFileIconSettings: { 'docx': '<i class="fa fa-file-word-o text-primary" ></i>', 'xlsx': '<i class="fa fa-file-excel-o text-success"></i>', 'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>', 'jpg': '<i class="fa fa-file-photo-o text-warning"></i>', 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>', 'zip': '<i class="fa fa-file-archive-o text-muted"></i>', 'doc': '<i class="fa fa-file-word-o text-primary"></i>', 'xls': '<i class="fa fa-file-excel-o text-success"></i>', 'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>', 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>', 'zip': '<i class="fa fa-file-archive-o text-muted"></i>', 'htm': '<i class="fa fa-file-code-o text-info"></i>', 'txt': '<i class="fa fa-file-text-o text-info"></i>', 'mov': '<i class="fa fa-file-movie-o text-warning"></i>', 'mp3': '<i class="fa fa-file-audio-o text-warning"></i>', 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>', 'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 'png': '<i class="fa fa-file-photo-o text-primary"></i>' }, previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", /* layoutTemplates:{ actionUpload:'',//去除縮略圖中的上傳圖片 actionZoom:'', //去除縮略圖中的查看詳情預覽的縮略圖標 actionDownload:'', //去覽縮略圖中的下載圖標 actionDelete:'', //去除縮略圖中的刪除圖標 },*/ msgFilesTooMany : "選擇上傳的文件數量({n}) 超過允許的最大數值{m}！", allowedFileTypes : [ 'image' ],//配置允許文件上傳的類型 audio video text object allowedPreviewTypes : [ 'image' ],//配置所有的被預覽文件類型 allowedPreviewMimeTypes : ["jpg", "jpeg", "gif", "png"],//控制被預覽的所有mime類型 language : 'zh' }); $("#imageFiles").on('fileuploaded', function(event, data, previewId, index) {//異步上傳成功結果處理 var img= data;//接收后台傳過來的json數據 var data=img.response; if(data.code=="0000"){ $("#hiddenImageFiles").append("<input type='hidden' name='musicTheoryImageList["+i+"].url' value='"+data.data+"'>"); i++; } }); $('#imageFiles').on('filesuccessremove', function(event, id) {//這個是ajax上傳成功之后，點擊縮略圖中的刪除按鈕觸發的事件 console.log('Uploaded thumbnail successfully removed'); console.log('Event'+event); console.log('Id'+id); }); $('#imageFiles').on('filepreremove', function(event,id,index) { console.log("id:"+id+"index:"+index+"event:"+event); });//ajax異步上傳成功之前刪除可以觸發的事件，上傳成功之后再按刪除按鈕，不管用的啊 $('#imageFiles').on('fileclear', function(event) {//input框中清除按鈕觸發的事件 $("[name='musicTheoryImageList"]).remove(); }); $("#imageFiles").on('fileerror', function(event, data, msg) {//異步上傳失敗結果處理 alert("上傳失敗"); });