plupload 结合springmvc上传完成后界面不跳转问题

摘要: 利用plupload上传完成后，在mvc后台return值界面一点反应也没有，但是Eclipse控制台会显示已经跳转完成，搞了好长时间没搞定，最后不得换跳转方式，利用plupload带有的几个事件解决了。

利用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 {}

这样就可以在后台完成我的数据操作了，而且也不必用户再多进行一次点击操作

效果：