之前很早的項目，使用bootstrap+jsp，需要多文件上傳，周末沒事翻開記錄一下，了解一下，可以查看https://blog.csdn.net/happy_wu/article/details/52288644 能夠看到中文版介紹和基本配置；
首先看一下效果：

點擊“選擇文件”:

點擊“添加文件”：

選擇好文件之后如下圖：

點擊“開始上傳”，
上傳過程中還會有進度條提示，很不錯的體驗；而且可以實現文件拖拽上傳；
雖然是前端的活，如果讓專業前端來做，會做的更漂亮，但是很多項目沒辦法，技術人員都要前后都要涉及；
下面講一下具體實現；
1、首先需要引入plupload的js文件：
下載地址：
鏈接：https://pan.baidu.com/s/1qRTg5FuZ7990XjSBvs6OTQ
提取碼：lusk
2、jsp頁面：
首先引入js：

<style type="text/css">@import url(<%=path%>/js/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css);</style> <script type="text/javascript" src="<%=path%>/js/plupload/js/plupload.full.js"></script> <script type="text/javascript" src="<%=path%>/js/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script> <script type="text/javascript" src="<%=path%>/js/plupload/js/i18n/cn.js"></script>

自定義css（因為我這里彈出框樣式不知道直接彈出有問題，在這里做了css修改）

.plupload_filelist_footer {border-top: 1px solid #FFF;height: 35px;line-height: 20px;vertical-align: middle; }.plupload_filelist_header {border-top: 1px solid #EEE;border-bottom: 1px solid #CDCDCD;height: 25px; }#hideModel {height: 20px;font-size: 10px;text-align: center;padding: 0px;margin-right: 10px;width: 40px; }.Wdate{height: 35px; } <tr align="center" style="height: 26px;"><td style="width: 33%">01系統拓撲結構及說明</td><td><button id="sysTopologyDes" class="col-sm-3" type="button" class="mybtn mybtn82" onclick="showModel(this)" style="font-family: 微軟雅黑;width: 100px">選擇文件</button><div id="sysTopologyDesList" class="col-sm-6" style="border:1px;width:500px"></div></td></tr> <!-- 上傳文件頁面 --><div class="modal fade bs-example-modal-sm" id="myModal2" data-backdrop="static"role="dialog" aria-label="myModalLabel" aria-hidden="true"style="overflow: auto; height: 100%;"><div class="modal-dialog modal-sm" style="width: 600px"><div class="modal-content"><div class="modal-body" style="padding: 0px;"><div style="width: 580px; margin: 0px auto"><form id="formId" action="" method=""><div id="uploader"></div></form></div></div><div class="modal-footer" style="padding: 0px;"><button id="hideModel" type="button" class="btn btn-default" data-dismiss="modal"> 關閉</button></div></div></div></div>

對應js文件：

//點擊上傳文件 function showModel(obj){selectedFileTarget = obj.id;initUpLoad();//每次使用重新渲染$("#myModal2").modal("show") }function initUpLoad(){//初始化上傳頁面$("#uploader").pluploadQueue({runtimes : 'gears,flash,silverlight,browserplus,html5,html4',//用來指定上傳方式，指定多個上傳方式請使用逗號隔開。一般情況下，你不需要配置該參數url : CONTENT_PATH+'/record/file.do',max_file_size : '10mb',unique_names : true,//當值為true時會為每個上傳的文件生成一個唯一的文件名，并作為額外的參數post到服務器端，參數明為name,值為生成的文件名。multiple_queues : true,chunk_size: '2mb',dragdrop: false,// Specify what files to browse forfilters : [ //可以使用該參數來限制上傳文件的類型，大小等，該參數以對象的形式傳入，它包括三個屬性：/* {title : "doc, doc文檔", extensions : "jpg,jpeg,png,gif,zip,rar,pdf,docx,doc,xlsx,xls,pptx,ppt,vsd,vsdx"} */{title : "doc, doc文檔", extensions : "zip,rar,pdf,docx,doc,xlsx,xls"} ],flash_swf_url : CONTENT_PATH+'/js/plupload/js/plupload.flash.swf',//當使用flash上傳方式會用到該參數。silverlight_xap_url : CONTENT_PATH+'/js/plupload/js/plupload.silverlight.xap',//當使用silverlight上傳方式會用到該參數。});var uploader = $('#uploader').pluploadQueue();//獲取上傳隊列//綁定各種監聽事件uploader.bind('StateChanged', function() {//當上傳隊列的狀態發生改變時觸發var files = uploader.files;if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {for(var i = 0, len = files.length; i<len; i++){}//alert("全部上傳完畢！");$('#uploader_filelist li').remove();//刪除緩存$("#hideModel").click();}});//獲取每次上傳的返回信息uploader.bind('FileUploaded', function(uploader,file,responseObject) {//當上傳隊列的狀態發生改變時觸發//alert(responseObject.response);//返回上傳路徑//alert(file.name);var file_path = responseObject.response.replace(/\\/g,"tag");var file_name = file.name; //文件名var html1 = '<li id="file-' + file.id +'" style="margin-left: 50px;text-align: left;">' + file_name + '&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" οnclick="delParent(this)" >刪除</a>'+'<input name="fileInfo" type="hidden" value="'+file_name+'$$'+file_path+'$$'+selectedFileTarget+'" />'+'</li> ';//var html2 = '<input name="fileName" type="hidden" value="'+file_name+'" />';if(selectedFileTarget=="recordProve"){//備案證明$(html1).appendTo('#fileNameList');}else if(selectedFileTarget=="sysTopologyDes"){//01系統拓撲結構及說明$(html1).appendTo('#sysTopologyDesList');}else if(selectedFileTarget=="sysSecuManage"){//02系統安全組織機構及管理制度$(html1).appendTo('#sysSecuManageList');}else if(selectedFileTarget=="sysSafePlan"){//03系統安全保護設施設計實施方案或改建實施方案$(html1).appendTo('#sysSafePlanList');}else if(selectedFileTarget=="sysSafeLicense"){//04系統使用的安全產品清單及認證、銷售許可證明$(html1).appendTo('#sysSafeLicenseList');}else if(selectedFileTarget=="evaluationReport"){//05系統等級測評報告$(html1).appendTo('#evaluationReportList');}else if(selectedFileTarget=="expertReview"){//06專家評審情況$(html1).appendTo('#expertReviewList');}else if(selectedFileTarget=="superAdvice"){//07上級主管部門審批意見$(html1).appendTo('#superAdviceList');}else if(selectedFileTarget=="otherFiles"){//其他附件$(html1).appendTo('#otherFilesList');}}); }

后臺實現：

/** 文件上傳*/@RequestMapping(value = "file", method = RequestMethod.POST)@ResponseBodypublic String uploadFile(HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {//初始化通用multipart解析器CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());String resultPath = null ;//判斷請求中是否有文件上傳if (!multipartResolver.isMultipart(request)) {//請求為空，直接返回return null;}//解析請求，將文件信息放到迭代器里 MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;Iterator<String> iter = multiRequest.getFileNames();//迭代文件，存放到某一路徑里while (iter.hasNext()) {//取得上傳文件 MultipartFile file = multiRequest.getFile(iter.next());if (null != file) {//取得當前上傳文件的文件名稱 String myFileName = file.getOriginalFilename();myFileName = myFileName.replaceAll("\\s*", "");//判斷文件是否存在，文件名為空，則說明文件不存在if (myFileName.trim() != "") {//重命名上傳后的文件名 String fileName =this.getName(myFileName);//定義上傳路徑 Register register = registerService.getRegisterByInnerName("RECORD_PORT_FILE_URL");String filePath = null;if (register != null) {filePath = register.getRegisterValue();if (!"\\".equals(filePath.substring(filePath.length() - 1))) {//判斷末尾是否有斜杠filePath = filePath + "\\";}}File pathFile = new File(filePath);if(!pathFile.exists() && !pathFile.isDirectory()) { pathFile.mkdirs(); } String path = filePath+fileName;File localFile = new File(path);file.transferTo(localFile);resultPath = path;//往數據庫里插一條附件信息}}}return resultPath;}

記得plupload上傳文件時分段進行，也就是將文件分為四段，然后上傳后拼在一起，所以對應進度條好像也是四段。 如果文件過大或者上傳出現問題，可以看看這一塊，是不是出了問題；

好了，一般情況下沒有問題，文件拖拽上傳一般也用不到，而且有的瀏覽器沒有開啟flash，所以還是老老實實點擊文件上傳靠譜；

總結

以上是生活随笔為你收集整理的plupload实现多文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。