Uploadify的例子

在ASP.NET中上传的控件有很多，这里介绍一个Uploadify的例子，主要是用flash实现的，无刷新，用户体验比较好，下面是ASP.NET MVC的一个例子，WebForm应该也是类似的。

效果图：

导入依赖：

1	< script src = "../../Scripts/jquery-1.4.1.min.js" type = "text/javascript" ></ script >

2	< script src = "../../Scripts/swfobject.js" type = "text/javascript" ></ script >

3	< script src = "../../Scripts/jquery.uploadify.v2.1.4.min.js" type = "text/javascript" ></ script >

4	< link href = "../../Content/Styles/uploadify.css" rel = "stylesheet" type = "text/css" />

前台初始化：

01	<script type= "text/javascript" >

02	$( function () {

03

//初始化上传

04	$( '#upload' ).uploadify({

05	'uploader' : '/Content/Images/uploadify.swf' ,

06	'script' : '/Index/Upload' ,

07	'folder' : 'UploadFiles' ,

08	'queueID' : 'fileQueue' ,

09	'cancelImg' : '/Content/Images/cancel.png' ,

10	'sizeLimit' : 1024 * 1024 * 4, //4M

11	'multi' : false ,

12	'onComplete' : callback

13

});

14

15

});

16	function callback(event, queueID, fileObj, response, data) {

17	if (response != "" ) {

18	alert(response + "成功上传!" );

19

}

20

else {

21	alert( "文件上传出错!" );

22

}

23

}

24

</script>

后台代码：

01	[AcceptVerbs(HttpVerbs.Post)]

02	public ContentResult Upload(HttpPostedFileBase fileData, string folder)

03

{

04	string result = null ;

05	if (fileData != null )

06

{

07

try

08

{

09	string fileExt = Path.GetExtension(fileData.FileName);

10	string fileName = DateTime.Now.ToString( "yyyyMMddhhmmss" ) + fileExt;

11

12	string dir = Request.MapPath( "~" + folder + "/" );

13	if (!Directory.Exists(dir))

14	Directory.CreateDirectory(dir);

15	fileData.SaveAs(Path.Combine(dir + fileName));

16

17	result = fileName;

18

}

19

catch

20

{

21	result = null ;

22

}

23

}

24	return Content(result);

25

}

示例下载： Uploadify.zip

---

 

---

 

下面是官方英文文档的一些翻译。

Uploadify属性

属性名	类型	说明
auto	boolean	添加到队列后自动上传
buttonImg	string	浏览按钮的背景图片
buttonText	string	浏览按钮的显示文字
cancelImg	string	取消上传按钮的图片
checkScript	string	服务端用来检查文件是否重名的脚本
displayData	string	上传时显示的提示（percentage百分比/speed速度）
expressInstall	string	安装swf的文件(expressInstall.swf)路径
fileDataName	string	重定义的input的名称（后台）
fileDesc	string	文件打开对话框中的文件类型描述
fileExt	string	可允许上传的文件类型
folder	string	文件存储的文件夹
height	integer	浏览按钮的高度
hideButton	boolean	是否隐藏浏览按钮
method	string	表单提交方式（post/get）
multi	boolean	是否允许上传多个文件
queueID	string	上传队列的元素的ID
queueSizeLimit	integer	上传队列大小
removeCompleted	boolean	完成上传时是否自动删除
rollover	boolean	当鼠标移上时产生特效
script	string	上传表单提交的目标脚本
scriptAccess	string	swf的文件地址
scriptData	JSON	提交给后台的附加信息
simUploadLimit	integer	同时可上传的文件实例数
sizeLimit	integer	每文件的最大大小
uploader	string	uploadify上传的swf文件路径
width	integer	浏览按钮的宽度
wmode	string	flash文件的wmode模式

Uploadify事件

事件名	参数	说明
onAllComplete	function(event,data)	当所有文件上传完毕时触发
onCancel	function(event,ID,fileObj,data)	当某文件被取消上传时触发
onCheck	function()	当开始上传时检查是否重名
onClearQueue	function(event)	当执行uploadifyClearQueue()后执行
onComplete	function(event, ID, fileObj, response, data)	当某文件上传完毕时触发
onError	function(event,ID,fileObj,errorObj)	当上传时有错误返回时触发
onInit	function()	当uploadify实例加载完毕时触发
onOpen	function(event,ID,fileObj)	当某文件开始上传时触发
onProgress	function(event,ID,fileObj,data)	当某文件上传进度改变时触发
onQueueFull	function(event,queueSizeLimit)	当上传队列达到限制时触发
onSelect	function(event,ID,fileObj)	每个文件被添加到上传队列时触发
onSelectOnce	function(event,data)	一次文件被添加到上传队列时触发
onSWFReady	function()	当flash加载完毕时触发

Uploadify方法

方法名	说明
.uploadify()	创建Uploadify的实例
.uploadifyCancel()	从上传队列中移除一个文件
.uploadifyClearQueue()	清空上传队列
.uploadifySettings()	修改Uploadify实例的属性
.uploadifyUpload()	触法文件上传