Uploadify插件在Spring MVC异步单次上传多文件

概述

在网页开发中，上传文件是一个常见的需求。然而，不同浏览器对于文件路径的显示方式有所不同。由于安全考虑，现代浏览器已经不再显示文件的完整路径，只会显示文件名。但是这并不意味着无法进行文件上传。在Spring MVC中，我们可以使用CommonsMultipartFile对象与页面上的表单进行绑定，然后将文件上传至服务器的临时文件缓存区，最后将缓存写入指定位置。

使用Uploadify插件实现异步上传

在Spring MVC中，我们可以借助第三方插件Uploadify来实现异步上传多个文件。

准备工作

首先，我们需要引入jQuery和Uploadify插件的相关文件。

lt;script src"jquery.js"gt;lt;/scriptgt;
lt;script src"uploadify/jquery.uploadify.min.js"gt;lt;/scriptgt;
lt;link rel"stylesheet" type"text/css" href"uploadify/uploadify.css"gt;

HTML代码

接下来，在HTML中添加一个文件上传的input元素和两个按钮用于触发上传和取消上传的操作。

lt;input type"file" id"file_upload"gt;
lt;input type"button" value"上传" onclick"javascript:$('#file_upload').uploadify('upload', '*');"gt;
lt;input type"button" value"取消上传" onclick"javascript:$('#file_upload').uploadify('cancel', '*');"gt;

JavaScript代码

在页面加载完毕后，我们通过JavaScript初始化Uploadify插件。

lt;scriptgt;
$(function() {
    $('#file_upload').uploadify({
        auto:false, //设置不自动上传
        swf:'uploadify/uploadify.swf', //swf文件位置
        uploader:'uploadFile.jhtml', //文件上传地址
        height:32, //“浏览”按钮的高度
        width:50, //“浏览”按钮的宽度
        fileObjName:'anyFile', //将要上传的文件对象的名称
        fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;', //允许上传的文件后          

          

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。