bootStrap多文件上传详细流程步骤+SSM框架代码实现

解释说明:此方法是bootstrap的文件上传(fileinput)插件,支持多文件上传、文件预览等功能 该方法是将多文件上传至服务器指定位置，并将路径拼接成String类型字符串返回给jsp，可通过"name"提交表单传入后台操作 若有问题，可以加我QQ一起讨论:32057207 第一步:在线引用css和js文件,也可进行本地引入，将bootstrap-fileinput-master.zip解压放入项目相应位置再引用即可 <!-- --------------引入bootStrap fileUpload 所需js、css start ---------------- --> <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.6/css/fileinput.css" rel="stylesheet"> <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.6/css/fileinput.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.6/js/fileinput.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.6/js/fileinput.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.6/js/fileinput.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.6/js/locales/zh.js"></script> <!-- ---------------引入bootStrap fileUpload 所需js、css end ------------------ --> 第二步:写HTML代码 1.附件上传区域 <table class="table-detail" cellpadding="0" cellspacing="0" border="0" type="main"> <tr> <th>附件上传</th> <td colspan="6"> <input id="file" name="file" multiple type="file" data-show-caption="true" class="projectfile"> </td> </tr> </table> 2.这行代码是需要通过“name”将存储在服务器的文件路径传到 <!-- 附件在服务器上的保存路径 --> <input type="hidden" id="flmAtt" name="flmAtt" value="${flowMs.flmAtt}"/> 第三步:写JS代码 <script type="text/javascript"> //文件上传 $(function () { initFileInput("file"); }); //文件上传 function initFileInput(ctrlName) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //设置语言 uploadUrl: "fileUpload.do?flmNo=${flowMs.flmNo}", //上传的地址 allowedFileExtensions: ['jpg', 'gif', 'png','txt','xlsx','zip','pdf','pptx','docx','xls'],//接收的文件后缀 //uploadExtraData:{"id": 1, "fileName":'123.mp3'}, uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 showRemove : true, //显示移除按钮 showPreview : true, //是否显示预览 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 //dropZoneEnabled: true,//是否显示拖拽区域 //minImageWidth: 50, //图片的最小宽度 //minImageHeight: 50,//图片的最小高度 //maxImageWidth: 1000,//图片的最大宽度 //maxImageHeight: 1000,//图片的最大高度 //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小 //minFileCount: 0, maxFileCount: 10, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount:true, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", }).on('filepreupload', function(event, data, previewId, index) { //上传中 var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; console.log('文件正在上传'); }).on("fileuploaded", function (event, data, previewId, index) { //一个文件上传成功 //后台返回的文件保存路径 var filePath = data.response; if(!filePath.isEmpty()){ //已经上传的附件路径 var flmAtt = $('#flmAtt').val(); if(flmAtt.isEmpty()){ //赋值 flmAtt = filePath; }else{ //将附件保存地址拼接 flmAtt = flmAtt + "," + filePath; } //清空 $('#flmAtt').val(""); //赋值-->传入后台 $('#flmAtt').val(flmAtt); } console.log('文件上传成功！'+data.id); }).on('fileerror', function(event, data, msg) { //一个文件上传失败 console.log('文件上传失败！'+data.id); }); } </script> 第四步:写Controller代码 @RequestMapping("fileUpload") @ResponseBody @Action(description="添加或更新流程需求单主表") public String fileUpload(HttpServletRequest request,@RequestParam("file") MultipartFile[] files)throws IOException { //文件上传位置 String rootPath = "E:/upload/fileUpload/"; //文件在服务器的绝对路径(若文件为多个，则以","隔开) String filePath = ""; if(files != null && files.length != 0){ //文件上传至服务器 Message msg = FileUpload.fileUpload(rootPath,files); //文件上传是否成功 if(msg.getUploadSuccess()){ filePath = msg.getFilePath(); } } return filePath; } 第五步:注意事项 1.controller中的方法：FileUpload.fileUpload(rootPath,files)此方法放在了util包里，将随此文件一起上传 2.controller中的方法：@RequestParam("file")中的"file"指的是jsp中的附件上传按钮的“name”值； 3.上传TXT的文件，若预览状态出现乱码，打开文件将文件另存为“utf-8”编码即可 另：预览中虽然是乱码，但是可以正常传输到服务器指定路径，不会出现乱码