為了上傳預覽pdf與圖片特用此插件。
源碼以及API地址：
bootstrap-fileinput源碼：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在線API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
一、效果展示
1、原始的input type='file'，簡直不忍直視。
2、不做任何裝飾的bootstrap fileinput：（bootstrap fileinput初級進化）
3、bootstrap fileinput高級進化：中文化、可拖拽上傳、文件擴展名校驗（如果不是需要的文件，不讓上傳）
二、一個bootstrap插件:
<!DOCTYPE html> <!-- release v4.3.6, copyright 2014 - 2017 Kartik Visweswaran --> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Krajee JQuery Plugins - © Kartik</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/default.css"> <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script> <script src="js/fileinput.js" type="text/javascript"></script> <!--簡體中文--> <script src="js/locales/zh.js" type="text/javascript"></script> <!--繁體中文--> <script src="js/locales/zh-TW.js" type="text/javascript"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> /***限制圖片框的大小**/ .kv-file-content { height: 160px; width: 160px !important; } .kv-preview-data { height: 90%; width: 90% !important; } </style> </head> <body> <div class="htmleaf-container"> <div class="container kv-main"> <div class="page-header"> <h2>文件上傳</h2> </div> <form enctype="multipart/form-data"> <input id="file-0a" class="file" type="file" multiple data-min-file-count="6"> <br> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </form> <form enctype="multipart/form-data"> <hr> <div class="form-group"> <input id="file-0b" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#"> </div> </form> </div> </div> </body> <script> //准備附件上傳的樣式 $("#file-0a").fileinput({ language: 'zh', showUpload: true, //是否顯示上傳按鈕 allowedFileExtensions: ['doc', 'docx', 'pdf'] }); $("#file-0b").fileinput({ showPreview: true, //是否顯示預覽 uploadUrl: '#', // you must set a valid URL here else you will get an error allowedFileExtensions: ['jpg', 'png', 'gif'], showUpload: true, //是否顯示上傳按鈕 overwriteInitial: false, maxFileSize: 1000, maxFilesNum: 10, language: 'zh', //allowedFileTypes: ['image', 'video', 'flash'], slugCallback: function (filename) { return filename.replace('(', '_').replace(']', '_'); } }); $(".btn-warning").on('click', function () { if ($('#file-4').attr('disabled')) { $('#file-4').fileinput('enable'); } else { $('#file-4').fileinput('disable'); } }); $(document).ready(function () { $("#test-upload").fileinput({ 'showPreview': false, 'allowedFileExtensions': ['jpg', 'png', 'gif'], 'elErrorContainer': '#errorBlock' }); }); </script> </html>
效果:
JS解釋:
$("#file-0b").fileinput({
showPreview: true, //是否顯示預覽
uploadUrl: '#', // you must set a valid URL here else you will get an error
allowedFileExtensions: ['jpg', 'png', 'gif'],
showUpload: true, //是否顯示上傳按鈕
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
language: 'zh',
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
定義顯示哪些按鈕。
bootstrap都有一些默認值，參考:fileinput.js
$.fn.fileinput.defaults = { language: 'en', showCaption: true, showBrowse: true, showPreview: true, showRemove: true, showUpload: true, showCancel: true, showClose: true, showUploadedThumbs: true, browseOnZoneClick: false, autoReplace: false, previewClass: '', captionClass: '', mainClass: 'file-caption-main', mainTemplate: null, purifyHtml: true, fileSizeGetter: null, initialCaption: '', initialPreview: [], initialPreviewDelimiter: '*$$*', initialPreviewAsData: false, initialPreviewFileType: 'image', initialPreviewConfig: [], initialPreviewThumbTags: [], previewThumbTags: {}, initialPreviewShowDelete: true, removeFromPreviewOnError: false, deleteUrl: '', deleteExtraData: {}, overwriteInitial: true, layoutTemplates: defaultLayoutTemplates, previewTemplates: defaultPreviewTemplates, previewZoomSettings: defaultPreviewZoomSettings, previewZoomButtonIcons: { prev: '<i class="glyphicon glyphicon-triangle-left"></i>', next: '<i class="glyphicon glyphicon-triangle-right"></i>', toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>', fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>', borderless: '<i class="glyphicon glyphicon-resize-full"></i>', close: '<i class="glyphicon glyphicon-remove"></i>' }, previewZoomButtonClasses: { prev: 'btn btn-navigate', next: 'btn btn-navigate', toggleheader: 'btn btn-default btn-header-toggle', fullscreen: 'btn btn-default', borderless: 'btn btn-default', close: 'btn btn-default' }, preferIconicPreview: false, preferIconicZoomPreview: false, allowedPreviewTypes: defaultPreviewTypes, allowedPreviewMimeTypes: null, allowedFileTypes: null, allowedFileExtensions: null, defaultPreviewContent: null, customLayoutTags: {}, customPreviewTags: {}, previewSettings: defaultPreviewSettings, fileTypeSettings: defaultFileTypeSettings, previewFileIcon: '<i class="glyphicon glyphicon-file"></i>', previewFileIconClass: 'file-other-icon', previewFileIconSettings: {}, previewFileExtSettings: {}, buttonLabelClass: 'hidden-xs', browseIcon: '<i class="glyphicon glyphicon-folder-open"></i> ', browseClass: 'btn btn-primary', removeIcon: '<i class="glyphicon glyphicon-trash"></i>', removeClass: 'btn btn-default', cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>', cancelClass: 'btn btn-default', uploadIcon: '<i class="glyphicon glyphicon-upload"></i>', uploadClass: 'btn btn-default', uploadUrl: null, uploadAsync: true, uploadExtraData: {}, zoomModalHeight: 480, minImageWidth: null, minImageHeight: null, maxImageWidth: null, maxImageHeight: null, resizeImage: false, resizePreference: 'width', resizeQuality: 0.92, resizeDefaultImageType: 'image/jpeg', minFileSize: 0, maxFileSize: 0, maxFilePreviewSize: 25600, // 25 MB minFileCount: 0, maxFileCount: 0, validateInitialCount: false, msgValidationErrorClass: 'text-danger', msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> ', msgErrorClass: 'file-error-message', progressThumbClass: "progress-bar progress-bar-success progress-bar-striped active", progressClass: "progress-bar progress-bar-success progress-bar-striped active", progressCompleteClass: "progress-bar progress-bar-success", progressErrorClass: "progress-bar progress-bar-danger", progressUploadThreshold: 99, previewFileType: 'image', elCaptionContainer: null, elCaptionText: null, elPreviewContainer: null, elPreviewImage: null, elPreviewStatus: null, elErrorContainer: null, errorCloseButton: '<span class="close kv-error-close">×</span>', slugCallback: null, dropZoneEnabled: true, dropZoneTitleClass: 'file-drop-zone-title', fileActionSettings: {}, otherActionButtons: '', textEncoding: 'UTF-8', ajaxSettings: {}, ajaxDeleteSettings: {}, showAjaxErrorDetails: true };
(1) 一些重要的參數解釋:(下面標紅的地方是為了去掉預覽區域的刪除按鈕與上傳按鈕)
解釋:
模板采用的默認配置:
查看默認配置:
繼續追蹤發現都是小圖標
去掉上傳按鈕
layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示
actionUpload:''//上傳按鈕不顯示
},
也可以去掉進度條:
layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示
actionUpload:'',//上傳按鈕不顯示
progress:''//隱藏進度條
},
(2) 另一個問題:如何知道選擇了幾個文件:
有時候我們需要驗證該插件選擇上文件才可以上傳(也就是我們需要知道選擇了幾個文件):
通過debugger可以看到::通過如下方法就可以知道選擇了幾個文件:
var scanFile = $("#bootUpOne")[0].files;
var scanFile_length = scanFile.length;
上面的 scanFile_length 就是選擇的文件個數。
例如:如果選擇上文件，將文件上傳:
//判斷申請書電子版文件是否選上
var applyFile = $("#attach")[0].files;
var applyFile_length = applyFile.length;
if(applyFile_length > 0){//上傳申請書附件
//上傳掃描的照片附件
$("#attach").fileinput("upload");
}
(3) 攜帶額外的數據上傳到服務器:(支持jQuery獲取動態值)
另一種方法:(這種方法對於動態設置的值不起作用，也就是此方法不會在上傳的時候再去獲取數據，而上面的方法是可以獲取動態的值)
(4)如果想要設置圖片在預覽區域內的大小:
previewSettings: {//限制預覽區域的寬高
image: {width: "100px", height: "100px"},
}
效果:
我們打開默認配置可以看到其采用的是默認配置::(兩次追蹤看出如下配置:)
(5)如果想要改變整個預覽區域的大小:
至今沒有找到辦法，只能設置里面內容區域的大小改變外面的值，也就是改變(4)值。
(6)今天遇到有個問題就是需要上傳四種不同的圖片，我設計的時候是點擊單選按鈕然后切換不同的圖片顯示，結果只有第一個區域查看詳情的時候有顯示，后面三個區域查看詳情只是背景色變暗，圖片顯示不出來:
(1)效果:
查看平面簡圖的時候正常:
查看后面三種圖的時候不正常:
(2)原因:
原因:上面四種圖查看詳情使用的是同一個模態框，並且只在第一種圖片的form表單中有，當點擊另外三只按鈕的實施，我的JS代碼將第一個圖片的div的display屬性變為none，因此在之后的另外三種圖片點擊查看詳情的時候會出現模態框顯示不出來的情況。
我的JS代碼:
//單選按鈕的點擊事件 $("[name='pictureType']").click(function(){ var clazz = $(this).prop("class"); $(".pictureDiv").css("display","none");//隱藏所有的div $("div."+clazz).css("display","block"); });
(3)解決辦法:將上面插件初始化的模態框刪除，並且將預覽的div拿出來單獨放到頁面中。
刪除插件初始化的模態框:
/**頁面執行一次刪除插件初始化的預覽圖片的模態框的函數**/ (function(){ alert("開始刪除插件自帶的預覽div") $(".pictureDiv .modal").remove();//刪除bootstrapFileinput初始化預覽的div })();
頁面中寫上預覽插件的模態框:
<!-- 預覽模態框(單獨放出來，否則隱藏div的時候圖片不顯示) --> <div> <div id="kvFileinputModal" class="file-zoom-dialog modal fade" tabindex="-1" aria-labelledby="kvFileinputModalLabel"><div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <div class="kv-zoom-actions pull-right"><button type="button" class="btn btn-default btn-header-toggle btn-toggleheader" title="縮放" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-resize-vertical"></i></button><button type="button" class="btn btn-default btn-fullscreen" title="全屏" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-fullscreen"></i></button><button type="button" class="btn btn-default btn-borderless" title="無邊界模式" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-resize-full"></i></button><button type="button" class="btn btn-default btn-close" title="關閉當前預覽" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button></div> <h3 class="modal-title">詳細預覽 <small><span class="kv-zoom-title"></span></small></h3> </div> <div class="modal-body"> <div class="floating-buttons"></div> <div class="kv-zoom-body file-zoom-content"></div> <button type="button" class="btn btn-navigate btn-prev" title="預覽上一個文件"><i class="glyphicon glyphicon-triangle-left"></i></button> <button type="button" class="btn btn-navigate btn-next" title="預覽下一個文件"><i class="glyphicon glyphicon-triangle-right"></i></button> </div> </div> </div> </div> </div>
(7)今天在對多種圖片處理的時候需要繼續對插件進行改造:(選中之后上傳，攜帶數據上傳，上傳完成重置插件而且重新執行一個JS查詢函數)
/** * 上傳頻譜圖 */ $("#upFrequencyPicture").fileinput({ language: 'zh',//中文 uploadUrl:"upLoadMultiple.do",//上傳的地址，加上這個才會出現刪除按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 showUpload: true, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : false, //顯示移除按鈕,跟隨文本框的那個 showClose:false,//顯示關閉按鈕 showCaption: true,//是否顯示標題,就是那個文本框 uploadAsync:true,//是否異步 layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示 actionUpload:'',//上傳按鈕不顯示 progress:''//隱藏進度條 }, enctype: 'multipart/form-data', previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", previewSettings: {//限制預覽區域的寬高 image: {width: "160px", height: "160px"} }, uploadExtraData: function (previewId, index) {//攜帶其他一些數據的格式 var data = { applyId:$("#hidden_apply_id").val(), pictureType:'2' }; return data; }, validateInitialCount:true, allowedFileExtensions: ['png','jpg']//允許上傳問價你的后綴 }).on('filepreupload', function(event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; }).on("filebatchselected", function(event, files) {//文件選中函數(選中之后上傳文件) $(this).fileinput("upload"); }).on("fileuploaded", function(event, data) {//上傳成功之后的一些處理 if(data.response) { alert("上傳成功!"); $(this).fileinput("reset");//將此插件重置(前提是不顯示上傳進度條，否則將留下進度條) loadEnTestPic("2");//執行頁面的一個JS函數重新查詢圖片 } });
最后在測試的時候發現一次傳多個上面的函數會失敗:(改造:每次上傳前將一個變量置為false，成功置為true，根據變量判斷是否重置:)
/** * 上傳頻譜圖 */ $("#upFrequencyPicture").fileinput({ language: 'zh',//中文 uploadUrl:"upLoadMultiple.do",//上傳的地址，加上這個才會出現刪除按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 showUpload: true, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : false, //顯示移除按鈕,跟隨文本框的那個 showClose:false,//顯示關閉按鈕 showCaption: true,//是否顯示標題,就是那個文本框 uploadAsync:true,//是否異步 layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示 actionUpload:'',//上傳按鈕不顯示 progress:''//隱藏進度條 }, enctype: 'multipart/form-data', previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", previewSettings: {//限制預覽區域的寬高 image: {width: "160px", height: "160px"} }, uploadExtraData: function (previewId, index) {//攜帶其他一些數據的格式 var data = { applyId:$("#hidden_apply_id").val(), pictureType:'2' }; return data; }, validateInitialCount:true, allowedFileExtensions: ['png','jpg']//允許上傳問價你的后綴 }).on('filepreupload', function(event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; }).on("filebatchselected", function(event, files) {//文件選中函數(選中之后上傳文件) isReset = false; $(this).fileinput("upload"); }).on("fileuploaded", function(event, data) {//上傳成功之后的一些處理 if(data.response) { alert("上傳成功!"); if(!isReset){ $("#upFrequencyPicture").fileinput("reset");//將此插件重置(前提是不顯示上傳進度條，否則將留下進度條) loadEnTestPic("2");//執行頁面的一個JS函數重新查詢圖片 isReset = true; } } });
此插件還有很多自帶的函數:大概在fileinput.js中3000行
(8)在多個插件同時上傳的時候可以通過上傳前后設置變量來表示什么時候上傳完成，上傳前置為false，上傳后置為true，也就兩個插件有兩個變量標記，當第一個上傳完成后將其對應的置為true，第二個上傳完成也將其置為true，最后一比當兩個都為true的時候就表示上傳完成了就可以進行頁面跳轉(上傳的時候基本上是同時進行，上傳完成是一前一后，可以通過變量知道最后傳完的)/***S 上傳文件相關操作****/
/** * 上傳掃描的pdf原件 */
//利用插件異步上傳單文件
var saveScan=true,saveAtta=true;
$("#bootUpOne").fileinput({
language: 'zh',//中文 uploadUrl:"upLoadOne.do",//上傳的地址，加上這個才會出現刪除按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 showPreview:true,//是否顯示預覽區域 showClose:false,//顯示關閉按鈕 showUpload: false, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : true, //顯示移除按鈕,跟隨文本框的那個 showCaption: true,//是否顯示標題,就是那個文本框 uploadAsync:true, enctype: 'multipart/form-data', previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示 actionUpload:''//上傳按鈕不顯示 }, previewSettings: {//限制預覽區域的寬高 pdf: {width: "0px", height: "0px"} }, uploadExtraData: function (previewId, index) {//攜帶其他一些數據的格式 var data = { applyId:$("#hidden_apply_id").val(), attachType:'3' }; return data; }, validateInitialCount:true, allowedFileExtensions: ['pdf'],//允許上傳問價你的后綴 }).on('filepreupload', function(event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; saveScan = false; alert("上傳前置為false"); }) .on("fileuploaded", function(event, data) {//上傳成功之后的一些處理 if(data.response) { saveScan = true; if(saveScan&&saveAtta){ alert("上傳成功!"); window.location.href=contextPath+"/environment/enApplyInfo_list.jsp"; } } }); /** * 上傳申請書電子版 */ $("#attach").fileinput({ language: 'zh',//中文 uploadUrl:"upLoadOne.do",//上傳的地址，加上這個才會出現刪除按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 showUpload: false, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : true, //顯示移除按鈕,跟隨文本框的那個 showCaption: true,//是否顯示標題,就是那個文本框 showClose:false,//顯示關閉按鈕 uploadAsync:true,//是否異步 layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示 actionUpload:''//上傳按鈕不顯示 }, enctype: 'multipart/form-data', previewSettings: {//限制預覽區域的寬高 pdf: {width: "0px", height: "0px"}, other: {width: "0px", height: "0px"} }, previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", uploadExtraData: function (previewId, index) {//攜帶其他一些數據的格式 var data = { applyId:$("#hidden_apply_id").val(), attachType:'1' }; return data; }, validateInitialCount:true, allowedFileExtensions: ['pdf','doc','docx']//允許上傳問價你的后綴 }).on('filepreupload', function(event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; saveAtta = false; }) .on("fileuploaded", function(event, data) {//上傳成功之后的一些處理 if(data.response) { saveAtta = true; if(saveScan&&saveAtta){ alert("上傳成功!"); window.location.href=contextPath+"/environment/enApplyInfo_list.jsp"; } } }); /***E 上傳文件相關操作****/
三、Struts2后台接收文件:(測試了普通的ajax傳文件與直接表單提交上傳與利用插件上傳文件)
例如:Struts接收后台文件:
<!DOCTYPE html> <!-- release v4.3.6, copyright 2014 - 2017 Kartik Visweswaran --> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Krajee JQuery Plugins - © Kartik</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/default.css"> <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script> <script src="js/fileinput.js" type="text/javascript"></script> <!--簡體中文--> <script src="js/locales/zh.js" type="text/javascript"></script> <!--繁體中文--> <script src="js/locales/zh-TW.js" type="text/javascript"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="index.js" type="text/javascript"></script> <style> /***限制圖片框的大小**/ .kv-file-content { height: 160px; width: 160px !important; } .kv-preview-data { height: 90%; width: 90% !important; } </style> </head> <body> <div class="htmleaf-container"> <div class="container kv-main"> <!--S 沒有用插件的上傳功能，與普通文件上傳一樣--> <form enctype="multipart/form-data" method="post" action="http://localhost/bootstrapFileUpload/upLoadOne.action"> <hr> 同步單文件上傳（類似於普通的表單提交,直接提交） <input id="fileUpOne" class="file" type="file" name="fileName"> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-default">Reset</button> <hr> </form> <form id="ajaxUpOneForm"> <hr> ajax異步上傳單文件（類似於普通的ajax上傳文件） <input id="ajaxUploadOneFile" class="file" type="file" name="fileName"/> <button type="button" class="btn btn-primary" id="ajaxUploadOneFileBtn">ajax異步上傳單文件</button> <hr> </form> <form enctype="multipart/form-data" method="post" action="http://localhost/bootstrapFileUpload/upLoadMultiple.action"> <hr> 同步多文件上傳（類似於普通的表單提交,直接提交） <input id="fileUpMultiple" class="file" type="file" multiple name="fileName"> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-default">Reset</button> <hr> </form> <form enctype="multipart/form-data" id="ajaxUpMultipleForm"> <hr> ajax異步上傳多文件（類似於普通的ajax上傳文件） <input id="ajaxUploadMultiple" class="file" type="file" multiple name="fileName"> <button type="button" class="btn btn-primary" id="ajaxUploadMultipeleFileBtn">ajax異步上傳單文件</button> <hr> </form> <!--E 沒有用插件的上傳功能，與普通文件上傳一樣--> <!--S 開始使用插件的上傳功能--> <form> <hr> 利用插件自帶的(上傳單個文件) <input id="bootUpOne" class="file-loading" type="file" name="fileName"> <hr> </form> <form enctype="multipart/form-data"> <hr> 利用插件自帶的(上傳多個文件) <input id="bootUpMultiple" class="file" multiple type="file" name="fileName"> <hr> </form> <!--E 開始使用插件的上傳功能--> </div> </div> </body> <script> /*********S 文件上傳按鈕的樣式顯示內容設定*****/ /*S 沒有使用插件的上傳功能*/ //同步單文件上傳(類似於普通的表單提交) $("#fileUpOne").fileinput({ language: 'zh', uploadUrl:"#",//上傳的地址，加上這個才會出現刪除按鈕 showPreview: true, //是否顯示預覽,不寫默認為true allowedPreviewMimeTypes: ['jpg', 'png', 'doc', 'pdf'],//控制被預覽的所有mime類型 showUpload: false, //是否顯示上傳按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 allowedFileExtensions: ['doc', 'docx', 'pdf'], layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示 actionUpload:''//上傳按鈕不顯示 } }); //ajax異步上傳單文件(類似於普通的ajax上傳文件) $("#ajaxUploadOneFile").fileinput({ language: 'zh', dropZoneEnabled: false,//是否顯示拖拽區域 uploadUrl:"#",//上傳的地址，加上這個才會出現刪除按鈕 showUpload: false, //是否顯示上傳按鈕 allowedFileExtensions: ['doc', 'docx', 'pdf'], layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示 actionUpload:''//上傳按鈕不顯示 } }); //同步多文件上傳(類似於普通的表單提交) $("#fileUpMultiple").fileinput({ language: 'zh', uploadUrl:"#",//上傳的地址，加上這個才會出現刪除按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 showUpload: false, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : true, //顯示移除按鈕,跟隨文本框的那個 showCaption: true,//是否顯示標題,就是那個文本框 allowedFileExtensions: ['jpg', 'png', 'gif'], layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示 actionUpload:''//上傳按鈕不顯示 } }); //ajax異步上傳多文件(類似於普通的ajax上傳文件) $("#ajaxUploadMultiple").fileinput({ language: 'zh',//中文 uploadUrl:"#",//上傳的地址，加上這個才會出現刪除按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 showUpload: false, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : true, //顯示移除按鈕,跟隨文本框的那個 showCaption: true,//是否顯示標題,就是那個文本框 allowedFileExtensions: ['jpg', 'png', 'gif'],//允許上傳問價你的后綴 layoutTemplates:{//預覽區域刪除按鈕與上傳按鈕的顯示 actionUpload:''//上傳按鈕不顯示 } }); /*E 沒有使用插件的上傳功能*/ /*S 開始使用插件的上傳功能*/ //利用插件異步上傳單文件 $("#bootUpOne").fileinput({ language: 'zh',//中文 uploadUrl:"upLoadOne.action",//上傳的地址，加上這個才會出現刪除按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 showUpload: true, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : true, //顯示移除按鈕,跟隨文本框的那個 showCaption: true,//是否顯示標題,就是那個文本框 uploadAsync:true, enctype: 'multipart/form-data', previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", uploadExtraData: function (previewId, index) {//攜帶其他一些數據的格式 var data = { ID:"123" }; return data; }, validateInitialCount:true, allowedFileExtensions: ['jpg', 'png', 'gif'],//允許上傳問價你的后綴 }).on('filepreupload', function(event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; }) .on("fileuploaded", function(event, data) { if(data.response) { alert('處理成功'); } }); //利用插件異步上傳多文件 $("#bootUpMultiple").fileinput({ language: 'zh',//中文 uploadUrl:"upLoadMultiple.action",//上傳的地址，加上這個才會出現刪除按鈕 dropZoneEnabled: false,//是否顯示拖拽區域 showUpload: true, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : true, //顯示移除按鈕,跟隨文本框的那個 showCaption: true,//是否顯示標題,就是那個文本框 uploadAsync:true, enctype: 'multipart/form-data', previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", uploadExtraData: function (previewId, index) {//攜帶其他一些數據的格式 var data = { ID:"123" }; return data; }, validateInitialCount:true, allowedFileExtensions: ['jpg', 'png', 'gif'],//允許上傳文件的后綴 }).on('filepreupload', function(event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; }) .on("fileuploaded", function(event, data) { if(data.response) { alert('處理成功'); } }); /*E 開始使用插件的上傳功能*/ /*********E 文件上傳按鈕的樣式顯示內容設定*****/ $(".btn-warning").on('click', function () { if ($('#file-4').attr('disabled')) { $('#file-4').fileinput('enable'); } else { $('#file-4').fileinput('disable'); } }); $(".btn-info").on('click', function () { $('#file-4').fileinput('refresh', {previewClass: 'bg-info'}); }); $(document).ready(function () { $("#test-upload").fileinput({ 'showPreview': false, 'allowedFileExtensions': ['jpg', 'png', 'gif'], 'elErrorContainer': '#errorBlock' }); }); </script> </html>
index.js
/** * Created by liqiang on 2018/2/4. */ /** * 頁面初始化函數 */ $(function () { //ajax上傳單文件函數 $("#ajaxUploadOneFileBtn").click(function(){ ajaxUploadOneFile(); }); //ajax上傳多文件函數 $("#ajaxUploadMultipeleFileBtn").click(function(){ ajaxUploadMultipleFile(); }); }); /** * 沒有使用插件 */ /****************S ajax上傳單文件 *******************************************/ function ajaxUploadOneFile() { var formData = new FormData($( "#ajaxUpOneForm" )[0]); $.ajax({ url: 'http://localhost/bootstrapFileUpload/upLoadOne.action' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { alert(returndata); }, error: function (returndata) { alert(returndata); } }); } /****************E ajax異步上傳單文件 *******************************************/ /****************S ajax上傳多文件 *******************************************/ function ajaxUploadMultipleFile() { var formData = new FormData($( "#ajaxUpMultipleForm" )[0]); $.ajax({ url: 'http://localhost/bootstrapFileUpload/upLoadMultiple.action' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { alert(returndata); }, error: function (returndata) { alert(returndata); } }); } /****************E ajax上傳多文件 *******************************************/ /** * 開始使用插件 */
后台Action:
OneFileUpAction.java
package cn.qlq.fileupload; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import javax.servlet.ServletContext; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; /** * 單文件上傳 * @author liqiang * */ public class OneFileUpAction extends ActionSupport{ private File fileName; private String fileNameContentType; private String fileNameFileName; private String ID;//測試是否可以攜帶額外的數據上來 public String execute() throws Exception{ ServletContext servletContext = ServletActionContext.getServletContext(); String dir = servletContext.getRealPath("/files/"+fileNameFileName); FileOutputStream outputStream = new FileOutputStream(dir); FileInputStream inputStream = new FileInputStream(fileName); byte[] buffer = new byte[1024]; int len = 0; // 從此輸入流中將最多 b.length 個字節的數據讀入一個 byte 數組中.讀入緩沖區的字節總數，如果因為已經到達文件末尾而沒有更多的數據，則返回 -1。 while((len = inputStream.read(buffer))!=-1){ // 將指定 byte 數組中從偏移量 off 開始的 len 個字節寫入此文件輸出流。 outputStream.write(buffer, 0, len); } inputStream.close(); outputStream.close(); return SUCCESS; } public File getFileName() { return fileName; } public void setFileName(File fileName) { this.fileName = fileName; } public String getFileNameContentType() { return fileNameContentType; } public void setFileNameContentType(String fileNameContentType) { this.fileNameContentType = fileNameContentType; } public String getFileNameFileName() { return fileNameFileName; } public void setFileNameFileName(String fileNameFileName) { this.fileNameFileName = fileNameFileName; } public String getID() { return ID; } public void setID(String iD) { ID = iD; } }
MultipleFileUpAction.java
package cn.qlq.fileupload; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import javax.servlet.ServletContext; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; public class MultipleFileUpAction extends ActionSupport{ private File[] fileName; private String[] fileNameContentType; private String[] fileNameFileName; public String execute() throws Exception{ for(int i=0;i<fileName.length;i++){ ServletContext servletContext = ServletActionContext.getServletContext(); String dir = servletContext.getRealPath("/files/"+fileNameFileName[i]); System.out.println(dir); FileOutputStream outputStream = new FileOutputStream(dir); FileInputStream inputStream = new FileInputStream(fileName[i]); byte[] buffer = new byte[1024]; int len = 0; // 從此輸入流中將最多 b.length 個字節的數據讀入一個 byte 數組中.讀入緩沖區的字節總數，如果因為已經到達文件末尾而沒有更多的數據，則返回 -1。 while((len = inputStream.read(buffer))!=-1){ // 將指定 byte 數組中從偏移量 off 開始的 len 個字節寫入此文件輸出流。 outputStream.write(buffer, 0, len); } inputStream.close(); outputStream.close(); } return SUCCESS; } public File[] getFileName() { return fileName; } public void setFileName(File[] fileName) { this.fileName = fileName; } public String[] getFileNameContentType() { return fileNameContentType; } public void setFileNameContentType(String[] fileNameContentType) { this.fileNameContentType = fileNameContentType; } public String[] getFileNameFileName() { return fileNameFileName; } public void setFileNameFileName(String[] fileNameFileName) { this.fileNameFileName = fileNameFileName; } }
struts配置:
struts.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <!-- 配置常量 --> <!-- 字符集 --> <constant name="struts.i18n.encoding" value="UTF-8"></constant> <!-- 開發模式 --> <constant name="struts.devMode" value="false"></constant> <!-- 擴展名 --> <constant name="struts.action.extension" value="action"></constant> <!-- 通用package --> <package name="file" namespace="/" extends="struts-default,json-default"> <global-results> <result name="success" type="json"></result> </global-results> <!--測試struts環境是否搭建成功 --> <action name="testEn" class="cn.qlq.fileupload.TestEn"></action> <!-- 測試上傳單個文件 --> <action name="upLoadOne" class="cn.qlq.fileupload.OneFileUpAction"></action> <!-- 測試上傳多個文件 --> <action name="upLoadMultiple" class="cn.qlq.fileupload.MultipleFileUpAction"></action> </package> </struts>
結果:
git源碼地址:https://github.com/qiao-zhi/bootstrapFileUpload
參考:https://www.cnblogs.com/landeanfen/p/5007400.html
http://www.cnblogs.com/wuhuacong/p/4774396.html
更全的參數解釋參考: http://blog.csdn.net/u012526194/article/details/69937741
更全的bootstrap教程: http://www.jb51.net/article/84087.htm