Bootstrap .fileinput() 批量上传文件并回调

2023-07-26 10:09| 来源: 网络整理| 查看: 265

最近项目做了个批量上传文件解析后导出结构化数据的功能，批量上传文件并回调是遇到的一个难点，下面简单做个记录。

前端

使用Bootstrap自带的文件上传功能.fileinput()。首先是文件的控件：

点击上传事件：

$(function() { //点击上传事件 $('#save').click(function(){ if($("#attach").val() != ""){ $("#attach").fileinput("upload"); showLoading(); } }); //上传功能 $('#attach').fileinput({ language: 'zh', //设置语言 dropZoneTitle: '支持pdf批量上传，最多1000M限制',//文字提醒 uploadUrl:'${pageContext.request.contextPath}/attach/upload',//上传地址 showRemove:false, showUpload:false, // showRemove, showUpload都为false时，不会显示拖拽框 enctype: 'multipart/form-data', //maxFileCount: 10,//设置文件上传数量 maxFileSize: 1000 * 1024, //1000MB 文件上传限制大小 uploadAsync: false,//同步上传后台参数为MultipartFile[]，若异步参数为MultipartFile showCaption: true, showPreview: true, showCancel:false, autoReplace:true,//是否自动替换当前图片，默认为false showUpload:false,//显示上传按钮 allowedFileExtensions: [ 'pdf'], //接收的文件后缀 uploadExtraData: function(){ return {uploadPath : "resources/file/attach", uploadSn :$('input[name="uploadSn"]').val()};//文件上传附带的参数 } }).on("fileuploaded", function (event, data, previewId, index){//上传成功后 //fileinput设置为异步时该回调函数生效 }).on("filebatchselected", function(event, files) {//选择文件后处理事件 if(files.length == 0){ alert("导入文件格式错误，只能选择pdf文件，请重新选择"); } }).on("filebatchuploadsuccess", function(event, data, previewId, index) { //fileinput设置为同步时该回调函数生效 hideLoading(); if(data.response.result == 'error'){ ToastUtils.error(data.response.msg); }else { alert(data.response.msg); $("#attachUploadForm .kv-file-remove").click();//上传完清空附件 //全部上传完成后延迟0.5秒导出目标excel文件 setTimeout(function () { var url = ctxPath + '/attach/export'; var values = new Array(); values.push($('input[name="uploadSn"]').val()); openWindowWithPost(url, '导出', [ 'uploadSn' ], values); }, 500); } }); })

有几点说明：

设置fileinput的属性uploadAsync时，若设置为false为同步上传，多个文件上传只会发送一个post请求，后台接收的参数要设置为MultipartFile[]。若设置为异步，则会发送多个post请求，每个请求会进入一次后台的入口，后台参数需设置为MultipartFile。同样的，uploadAsync属性设置后，上传完成的回调函数会不一样。设置为同步时，回调函数为.on("filebatchuploadsuccess", function(event, data, previewId, index) {})；异步的回调函数为.on("fileuploaded", function (event, data, previewId, index){})。本例因为需要批量上传文件后做一个统一的文件导出，所以使用同步的方式，可以看到后台的代码也会有一些区别。后台 .java @ResponseBody @RequestMapping(value=("/upload"), method=RequestMethod.POST) public Object upload(@RequestParam MultipartFile[] attach, @RequestParam("uploadPath") String uploadPath, @RequestParam("uploadSn") Integer uploadSn, HttpServletRequest request) { //具体功能实现 }

需要注意：

后台MultipartFile的参数名（本例为attach）要与前端的一致，即$('#attach').fileinput({})中的attach，不然请求进不了后台入口。另外一个就是前面提到的选择同步、异步这里的MultipartFile参数设置，分别为MultipartFile[]和MultipartFile。

即如果选择异步的方式，后台接收用下面这种方式：

.java @ResponseBody @RequestMapping(value=("/upload"), method=RequestMethod.POST) public Object upload(@RequestParam MultipartFile attach, @RequestParam("uploadPath") String uploadPath, @RequestParam("uploadSn") Integer uploadSn, HttpServletRequest request) { //具体功能实现 }

【本文地址】

公司简介

联系我们

Bootstrap .fileinput() 批量上传文件 并回调

Bootstrap .fileinput() 批量上传文件并回调