天天看点

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

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

关于plupload: 查看http://www.cnblogs.com/2050/p/3913184.html     讲解的非常详细。还有很多例子。

记录下我遇到的问题,利用bootstrap弹出的modal进行上传,上传完成后,怎样都跳转不了,除非另外点击一个动作,但是这样的话会影响我后台的批量添加工作。

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

我的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的

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

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

效果:

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

版权声明:本文为CSDN博主「weixin_33924220」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_33924220/article/details/91678284