jquery文件批量上传控件Uploadify3.2(java springMVC)

你的名字 2021-03-22 12:41 487阅读 0赞

人比較懒  有用为主 不怎么排版了

先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址。分flash版（免费）和html5版（收费）。

官网上能够看到效果演示。

另外在网上找到了一份Uploadify3.2的中文API文档。能够在我上传的资源里面下载。

以下就是一个基于springMVC的文件上传演示样例，看起来可能比文档更直观一些···

1.下载插件放到项目中

2.在jsp页面中引入下面JS和CSS

3.jsp页面中创建展示DIV和操作button

</pre><pre name="code" class="html"><form>
    	<div id="queue"></div><!-上传队列展示区-->
    	<input id="file_upload" name="file_upload" type="file" multiple="true"><!-批量上传button-->
    </form>

4.编辑js代码

$(document).ready(function() {
    		$("#file_upload").uploadify({
    			'swf' : '${ctxStatic}/uploadify/geo_fileUpload.swf',//控件flash文件位置
                            //后台处理的请求（也就是action请求路径），后面追加了jsessionid，用来标示使用当前session（默认是打开新的session。会导致存在session校验的请求中产生302错误）
                            'uploader' : '${ctx}/testFu;jsessionid=${pageContext.session.id}',
    			'queueID' : 'queue',//与以下HTML的div.id相应  
    			'width' : '100',//button宽度
    			'height' : '32',//button高度
    			'fileTypeDesc' : '指定类型文件',
    			'fileTypeExts' : '*.jpg;*.png', //控制可上传文件的扩展名，启用本项时需同一时候声明fileDesc 
    			'fileObjName' : 'myTestFile',//文件对象名称,用于后台获取文件对象时使用,详见以下的java代码
    			'buttonText' : '批量上传',//上传button显示内容。还有个属性能够设置button的背景图片
    			'fileSizeLimit' : '100KB',
    			'multi' : true,
    			'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//重写默认方法
    			'onFallback' : function() {//检測FLASH失败调用
    				alert("您未安装FLASH控件。无法上传图片！请安装FLASH控件后再试。

“); }, //以下方法是相应overrideEvents的重载方法，详细实现是网上找到的一个别的朋友的代码， //我把这些方法抽到了一个自己定义js中。我会在最后面贴出来 ‘onSelect’ : uploadify_onSelect, ‘onSelectError’ : uploadify_onSelectError, ‘onUploadError’ : uploadify_onUploadError, ‘onUploadSuccess’ : uploadify_onUploadSuccess }); });

5.controller类的方法

<pre name="code" class="html">	@ResponseBody
    	@RequestMapping(value = "testFu")

//这里的<span style="font-family: Arial, Helvetica, sans-serif;">creativeFile与上面jsp空间中的</span><span style="font-family: Arial, Helvetica, sans-serif;">creativeFile相应</span><span style="font-family: Arial, Helvetica, sans-serif;">
    </span>	public String testUpload(MultipartFile creativeFile, HttpServletResponse response) {
    		System.out.println(creativeFile.getName());
    		System.out.println(creativeFile.getOriginalFilename());
    		System.out.println(creativeFile.getSize());
    		return "測试測试";// 返回给前台的提示信息
    	}

6.附录摘自网上的重载方法列表，我做了一些修改使之更有用（感谢网络无名高手）

到此Uploadify的文件批量上传就OK了。 有疑问能够留言咱们一起讨论。这个控件非常easy花时间看的话都能弄懂。写这个文章的目的也是为了让大家更快上手。节省宝贵时间