1、上传组件uploadify的说明及脚本引用

Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技术,Uploadify 越过浏览器的限制,控制了整个上传的处理过程,实现了客户端无刷新的文件上传,这样就实现了在客户端的上传进度控制,所以,你首先要确定浏览器中已经安装了 Adobe 的 Flash 插件。

Uploadify 当前有两个版本,基于 Flash 是免费的,还有基于 HTML5 的收费版,我们使用免费版,当前版本为v3.2.1。

这个组件需要Jquery库的支持,一般情况下,需要添加Jquery的js库,如下所示

?

不过由于我的Web开发框架是基于EasyUI的,一般在网页的开始就会引用相关的类库,已经包含了Jquery的类库了,如下所示。

?

所以我们只需要添加Javascript类库(jquery.uploadify.js),另外加上他的样式文件(uploadify.css)即可:

?

2、上传组件uploadify在Web界面的使用

首先我们需要在HTML代码中放置两个控件,一个是用来上传的控件,一个是用来显示已上传列表的控件,还有就是添加上传和取消上传的按钮操作,如下所示。

?

界面效果初始化如下所示:

jquery获取文件上传对象_jquery获取文件上传对象

当然,下一步我们需要添加相应的文件上传初始化的操作脚本代码,如下所示。

?

在上面的脚本中,均有注释,一看就明白相关的属性了,不明白的也可以到官方网站去查找了解。值得注意的就是

?

这行就是提交文件给MVC的Action进行处理,我们在控制器FileUpload的 Upload处理即可。

另外,在附件上传完毕后,我们需要对所在的界面进行更新,以便显示已上传的列表,那么我们需要增加下面的函数处理即可。

?

最后说明非常值得注意的地方,就是文件上传的时候,我们需要动态获取界面上的一些元素的值,作为参数传递,那么我们就需要在onUploadStart函数中进行如下处理。

?

3、上传组件uploadify的C#后台处理代码

在上面的传递参数中,我使用了中文数值,一般情况下,这样会在后台拿到中文乱码,所以我们需要在控制器的Action的函数里面设置它的内容格式,如下所示。

?

控制器FileUpload的后台处理Action代码完整如下所示:

?

4、上传组件uploadify在Web开发框架中的界面展示

具体上传组件在的Web开发框架中界面效果如下所示,下图是总体的列表中附件的展示。

jquery获取文件上传对象_上传_02

附件编辑和上传界面如下所示。

jquery获取文件上传对象_Web_03

附件信息查看效果如下所示:

jquery获取文件上传对象_Web_04

总结

以上所述是小编给大家介绍的基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用,希望对大家有所帮助