利用plupload上传完成后,在mvc后台return值界面一点反应也没有,但是Eclipse控制台会显示已经跳转完成,搞了好长时间没搞定,最后不得换跳转方式,利用plupload带有的几个时间解决了。
关于plupload: 查看http://www.cnblogs.com/2050/p/3913184.html 讲解的非常详细。还有很多例子。
记录下我遇到的问题,利用bootstrap弹出的modal进行上传,上传完成后,怎样都跳转不了,除非另外点击一个动作,但是这样的话会影响我后台的批量添加工作。
我的plupload配置,这里我用的是velocity模板,跟jsp区别不大:
var uploader = new plupload.Uploader({ //实例化一个plupload上传对象 browse_button : 'browse',//选择文件按钮的id url : '$!request.getContextPath()/receive/customer/batchImpInit.io', flash_swf_url : '$!request.getContextPath()/static/js/plupload/Moxie.swf',//flash动作路径 silverlight_xap_url : '$!request.getContextPath()/static/js/plupload/Moxie.xap', filters: { mime_types : [ //只允许上传图片文件和rar压缩文件 { title : "excel", extensions:"xls,xlsx"}, ], max_file_size : '2048kb', //最大只能上传100kb的文件 prevent_duplicates : true //不允许队列中存在重复文件 }, rename:true, multipart:true, multi_selection:false//只能选取一个 }); uploader.init(); //初始化 //绑定文件添加进队列事件 uploader.bind('FilesAdded',function(uploader,files){ for(var i = 0, len = files.length; i<len; i++){ var file_name = files[i].name; //文件名 //构造html来更新UI var html = '<li id="file-' + files[i].id +'"><p class="file-name">' + file_name + '</p> <b id="removeFile" data-val=""+files[i].id+"">删除</b> <p class="progress"></p></li>'; $(html).appendTo('#file-list'); } }); //删除已选择的文档 这个是删除一个已选择的文件 $(document).on("click","#removeFile",function(){ $(this).parent('li').remove(); //uploader.removeFile($(this).attr("data-val")); var toremove = ""; var id=$(this).attr("data-val"); for(var i in uploader.files){ if(uploader.files[i].id === id){ toremove = i; }; } uploader.files.splice(toremove, 1); console.log("XXX"+$(this).attr("data-val")); }); //绑定文件上传进度事件 uploader.bind('UploadProgress',function(uploader,file){ $('#file-'+file.id+' .progress').css('width',file.percent + '%');//控制进度条 }); uploader.bind('FileUploaded',function(uploader,file,responseObject){ $("#container").html('<form action="$!request.getContextPath()/batchImpRC.io" method="post" id="form2">'+ '<input type="text" name="filepath" value='+responseObject.response+' />' +'</form>'); $("#form2").submit(); }); //上传按钮 $('#upload-btn').click(function(){ uploader.start(); //开始上传 });
问题一直解决不了后,只能转换方式,我的想法很简单,先将上传来的文件进行保存,然后通过plupload的
uploader.bind('FileUploaded',function(uploader,file,responseObject)这个事件来完成后续的数据批量导入
cnblogs 无双大神中关于这个事件的解释
FileUploaded
当队列中的某一个文件上传完成后触发
监听函数参数:(uploader,file,responseObject)
uploader
为当前的plupload实例对象,file
为触发此事件的文件对象,responseObject
为服务器返回的信息对象,它有以下3个属性:
response:服务器返回的文本
responseHeaders:服务器返回的头信息
status:服务器返回的http状态码,比如200
后台保存文件操作如下:
@RequestMapping(value = "/receive/customer/batchImpInit.io") public String batchImpInit(HttpServletRequest request,String name, HttpServletResponse response ,@RequestBody MultipartFile file) throws Exception { String realPath = request.getServletContext().getRealPath(""); String path = realPath+CUSTOMER_RECEIVE_DIR+Utils.generateUUID()+uploadFileName; File realFile = new File(path); file.transferTo(realFile);//将muitipartFile转为普通的file PrintWriter writer = response.getWriter(); writer.write(path);//向前台响应文件的存储路径 return null; }
这样的话就能通过后台返回已保存文件的绝对路径,然后通过reponse返回到这个事件中再进行一次跳转即可进行文件的批量添加操作,具体步骤如下:
在页面新添加一个 form并直接提交 $("#container").html('<form action="$!request.getContextPath()/batchImpRC.io" method="post" id="form2">'+ '<input type="text" name="filepath" value='+responseObject.response+' />' +'</form>'); $("#form2").submit(); 后台操作如下 @RequestMapping(value = "/batchImpRC.io", method = RequestMethod.POST) public String batchImpRC(HttpServletRequest request,HttpServletResponse response, String filepath) throws IOException {}
这样就可以在后台完成我的数据操作了,而且也不必用户再多进行一次点击操作
效果: