文档章节

关于多文件上传插件uploadify使用总结

another_yu
 another_yu
发布于 2015/11/24 17:47
字数 487
阅读 88
收藏 0

uploadify官网:http://www.uploadify.com/

属性配置的话官网上的docs文档上有说明和使用例子,下面我贴出我的配置:

需要导入的js文件:


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.min.js" ></script>
<script type="text/javascript" src="js/jquery.uploadify.js" ></script>

//uploadify.swf这个文件要用到,也请放到项目中
           //放在ready中
	$('#picupload').uploadify({
		buttonText:"选择文件",
		auto:false,
		swf:"js/uploadify.swf",
		successTimeout:60,
		fileObjName:'uploadify',  //这里设置的值要跟后台接收的值一样,否则会报404找不到错误
		
		//这里指向后台action,也可是是一个处理上传内容的php文件、jsp文件……等等
		uploader:"goodsAction!update?id="+$('#id').val(),
		fileTypeExts:'*.jpg;*.jpge;*.png;*.gif', //设置允许上传文件的类型
		fileSizeLimit:'3MB',
		queueSizeLimit:25,
		onUploadProgress:function(){    //滚动条  可以自行设置,参考官网文档
		},
		onSelect:function(){   //选中文件后调用的函数
		},
		onSelectError:function(file, errorCode, errorMsg){
		 	switch(errorCode){
		 	case -100:
		 		alert("上传的文件数量已经超出系统限制");
		 		break;
		 	case -110:
		 		 alert("文件 ["+file.name+"]的大小超出系统限制的"+
		 		$('#file_upload').uploadify('settings','fileSizeLimit')+"值!");
	 			break;
	 		case -120:
	 			alert("文件 ["+file.name+"] 大小异常!");
				break;
			case -130:
				alert("文件 ["+file.name+"] 类型不正确!");
				break;
					}
			 },
		onFallback:function(){
		          alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
		      },
		      onUploadSuccess:function(file, data, response){
		          alert("上传成功,请刷新页面!");
		      }
	})

以下是我的简单实用:

<input type="file" name="picupload" id="picupload"/>
<input type="button" value="开始上传" onclick="javascript:$('#picupload').uploadify('upload', '*');"/>
<input type="button" value="停止上传" onclick="javascript:$('#picupload').uploadify('stop');"/>
<input type="button" value="清除队列" onclick="javascript:$('#picupload').uploadify('cancel', '*');"/>

后台上传文件代码就和别的上传一样了,关键是要把自己设置的fileObjName和后台对应好


还有一点值得提的是,我感觉这个插件看似能上传多个,实际上后台还是一个一个接取的,并不是文件列表传过去,可能要自己后台用多线程实现吧!



© 著作权归作者所有

another_yu
粉丝 4
博文 17
码字总数 4285
作品 0
杭州
程序员
私信 提问
基于uploadify.js实现多文件上传和上传进度条的显示

  uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制、文件类型、是否自动上传等属性,可以显示上传的进度条。官网地址是http://www.uploadify.com/,进入...

雲霏霏
2014/12/08
0
0
uploadify 实现文件上传

uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异. 如何实现图片上传功能? 在...

coderzs
2017/10/07
0
0
使用uploadify插件进行多文件上传时如何传递表单参数

Uploadify是一个Jquery框架下处理批量文件上传的插件,支持多种服务器端软件。 问题:在使用uploadify进行文件上传时,由于需要对每个文件进行说明,而不仅仅是把文件上传至服务器。 解决思路...

科比可比克
2016/06/01
255
0
jQuery文件上传插件--Uploadify

Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……...

匿名
2009/12/12
153.3K
6
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.7K
9

没有更多内容

加载失败,请刷新页面

加载更多

好程序员web前端教程分享常见基础面试题之性能优化

  好程序员web前端教程分享常见基础面试题之性能优化,为了能够更快的通过企业面试,很多人都会背面试题,而性能优化是每一个企业都会问到的问题,今天就给大家分享一下。   性能优化(Op...

好程序员官网
5分钟前
2
0
面试题必问:spring MVC工作流程图

先看下我在网上找的一张图片,图虽然不是很好看但是很详细很清晰 具体解答 用户向服务器发送请求,请求被spring的核心组件DispatcherServlet截获 DispatcherServlet对请求URL进行解析,得到U...

shiliang_feng
6分钟前
3
0
centos7编译安装php7

安装依赖 [root@localhost ~]# yum -y install gcc gcc++ gcc-c++ wget make libxml2 libxml2-devel openssl openssl-devel curl-devel libjpeg-devel libpng-devel freetype-devel bison au......

请叫我足下
6分钟前
2
0
处理Unicode字符 \u202E 问题

这么一段字符串,实际内容应该是123abc456,在获取到的时候就变成下面的内容,肯定要处理呀.... 又得手撸了代码了\u202E : 会将字符串进行翻转,\u202D : 会将字符串互换位置,但为什么从...

小象鸭
11分钟前
2
0
怎么用视频转换器把qsv格式转换成mp4

随着生活水平不断提高消费水平也在不断的增长,与此同时娱乐已经成为了人们生活中重要的一环,在看一些视频时是否会发现例如qsv、qlv和kux等格式是不能用别的播放器打开的,其实这几个格式分...

cenfeng123
20分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部