基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用 - 伍华聪 - 博客园
随笔 - 443, 文章 - 20, 评论 - 6756, 引用 - 20
大概一年前，我还在用Asp.NET开发一些行业管理系统的时候，就曾经使用这个组件作为文件的上传操作，在随笔《》中可以看到，Asp.NET中如何使用这个组件进行文件上传的，当时上传文件的处理主要也是使用ashx一般处理程序来进行处理的。本文主要介绍我的Web开发框架中，在MVC4的环境中如何集成这个非常棒的文件上传组件的。
1、上传组件uploadify的说明及脚本引用
Uploadify 是 JQuery 一个著名的上传插件，利用 Flash 技术，Uploadify 越过浏览器的限制，控制了整个上传的处理过程，实现了客户端无刷新的文件上传，这样就实现了在客户端的上传进度控制，所以，你首先要确定浏览器中已经安装了 Adobe 的 Flash 插件。Uploadify 当前有两个版本，基于 Flash 是免费的，还有基于 HTML5 的收费版，我们使用免费版，当前版本为v3.2.1。
这个组件需要Jquery库的支持，一般情况下，需要添加Jquery的js库，如下所示
&script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"&&/script&
不过由于我的Web开发框架是基于EasyUI的，一般在网页的开始就会引用相关的类库，已经包含了Jquery的类库了，如下所示。
@*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
&script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"&&/script&
&script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"&&/script&
&script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"&&/script&
所以我们只需要添加Javascript类库（jquery.uploadify.js），另外加上他的样式文件（uploadify.css）即可：
@*添加对uploadify控件的支持*@
@*&script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"&&/script&*@
&script type="text/javascript" src="~/Content/JQueryTools/uploadify/jquery.uploadify.js"&&/script&
&link href="~/Content/JQueryTools/uploadify/uploadify.css" rel="stylesheet" type="text/css" /&
2、上传组件uploadify在Web界面的使用
首先我们需要在HTML代码中放置两个控件，一个是用来上传的控件，一个是用来显示已上传列表的控件，还有就是添加上传和取消上传的按钮操作，如下所示。
&label for="Attachment_GUID"&附件上传：&/label&
&input class="easyui-validatebox" type="hidden" id="Attachment_GUID" name="Attachment_GUID" /&
&input id="file_upload" name="file_upload" type="file" multiple="multiple"&
&a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpload" data-options="plain:true,iconCls:'icon-save'"
onclick="javascript: $('#file_upload').uploadify('upload', '*')"&上传&/a&
&a href="javascript:void(0)" class="easyui-linkbutton" id="btnCancelUpload" data-options="plain:true,iconCls:'icon-cancel'"
onclick="javascript: $('#file_upload').uploadify('cancel', '*')"&取消&/a&
&div id="fileQueue" class="fileQueue"&&/div&
&div id="div_files"&&/div&
界面效果初始化如下所示：
当然，下一步我们需要添加相应的文件上传初始化的操作脚本代码，如下所示。
&script type="text/javascript"&
$(function () {
//添加界面的附件管理
$('#file_upload').uploadify({
'swf': '/Content/JQueryTools/uploadify/uploadify.swf',
//FLash文件路径
'buttonText': '浏
//按钮文本
'uploader': '/FileUpload/Upload',
//处理文件上传Action
'queueID': 'fileQueue',
//队列的ID
'queueSizeLimit': 10,
//队列最多可上传文件数量，默认为999
'auto': false,
//选择文件后是否自动上传，默认为true
'multi': true,
//是否为多选，默认为true
'removeCompleted': true,
//是否完成后移除序列，默认为true
'fileSizeLimit': '10MB',
//单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
'fileTypeDesc': 'Image Files',
//文件描述
'fileTypeExts': '*. *. *. *.*.*.*.*.zip',
//上传的文件后缀过滤器
'onQueueComplete': function (event, data) {
//所有队列完成后事件
ShowUpFiles($("#Attachment_GUID").val(), "div_files");
//完成后更新已上传的文件列表
$.messager.alert("提示", "上传完毕！");
//提示完成
'onUploadStart' : function(file) {
$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法规', 'guid': $("#Attachment_GUID").val() }); //动态传参数
'onUploadError': function (event, queueId, fileObj, errorObj) {
//alert(errorObj.type + "：" + );
在上面的脚本中，均有注释，一看就明白相关的属性了，不明白的也可以到官方网站去查找了解。值得注意的就是
'uploader': '/FileUpload/Upload'
这行就是提交文件给MVC的Action进行处理，我们在控制器FileUpload的 Upload处理即可。
另外，在附件上传完毕后，我们需要对所在的界面进行更新，以便显示已上传的列表，那么我们需要增加下面的函数处理即可。
'onQueueComplete': function (event, data) {
最后说明非常值得注意的地方，就是文件上传的时候，我们需要动态获取界面上的一些元素的值，作为参数传递，那么我们就需要在onUploadStart函数中进行如下处理。
$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法规', 'guid': $("#Attachment_GUID").val() }); //动态传参数
3、上传组件uploadify的C#后台处理代码
在上面的传递参数中，我使用了中文数值，一般情况下，这样会在后台拿到中文乱码，所以我们需要在控制器的Action的函数里面设置它的内容格式，如下所示。
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";
控制器FileUpload的后台处理Action代码完整如下所示：
public class FileUploadController : BaseController
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase fileData, string guid, string folder)
if (fileData != null)
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";
// 文件上传后的保存路径
string filePath = Server.MapPath("~/UploadFiles/");
DirectoryUtil.AssertDirExist(filePath);
string fileName = Path.GetFileName(fileData.FileName);
//原始文件名称
string fileExtension = Path.GetExtension(fileName);
//文件扩展名
string saveName = Guid.NewGuid().ToString() + fileE //保存文件名称
FileUploadInfo info = new FileUploadInfo();
info.FileData = ReadFileBytes(fileData);
if (info.FileData != null)
info.FileSize = info.FileData.L
info.Category =
info.FileName = fileN
info.FileExtend = fileE
info.AttachmentGUID =
info.AddTime = DateTime.N
info.Editor = CurrentUser.N//登录人
//info.Owner_ID = OwerId;//所属主表记录ID
CommonResult result = BLLFactory&FileUpload&.Instance.Upload(info);
if (!result.Success)
LogTextHelper.Error("上传文件失败:" + result.ErrorMessage);
return Content(result.Success.ToString());
catch (Exception ex)
LogTextHelper.Error(ex);
return Content("false");
return Content("false");
private byte[] ReadFileBytes(HttpPostedFileBase fileData)
using (Stream inputStream = fileData.InputStream)
MemoryStream memoryStream = inputStream as MemoryS
if (memoryStream == null)
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
data = memoryStream.ToArray();
4、上传组件uploadify在Web开发框架中的界面展示
具体上传组件在的Web开发框架中界面效果如下所示，下图是总体的列表中附件的展示。
附件编辑和上传界面如下所示。
附件信息查看效果如下所示：
本系列文章列表如下：
基于MVC4+EasyUI的Web开发框架的系列文章：2543人阅读
java（50）
uploadify上传用的是一个flash插件。
flash中有个bug就是自身创建一个session，这样就导致与web本身的session不一致 权限验证失败的问题。& 就是这个问题 让我花了好多时间来解决
查询百度 、google、以及stackoverflow多日 大都是写php和asp.net中的例子
这让我很头疼，最终在某个博客 看到解决的 问题，经过本人测试 这个解决方法可行，跟大家分享一下 ，以及下次自己碰到一样问题的时候方便查阅
因为uploadify是不会自动传送session值的，所以当session被拦截后，它的请求是发不出去的（补充，还有一种情况就是uploaddify是使用flash来处理文件文件上传，而在在非IE浏览器（Firefox，Chrome）下使用flash方式向服务器发起请求，是会新生成一个session的（此时旧的session则丢失了），如果要避免这个问题，需要把当前的sessionId作为形参传给servlet类）；
解决方法：
Java代码 &
$(&#uploadify&).uploadify({&&'swf'&&&&&&&:&basePath+'js/component/uploadify/js/uploadify.swf',&&'uploader'&&&&&&:&'uploadFile.jsessionid=&%=session.getId(%&',&&&'cancelImg'&&&&&:&[b][b][/b][/b]basePath+'js/component/uploadify/img/uploadify-cancel.png',&&&'fileObjName'&&&:&'uploadify',&&&'queueID'&&&&&&&:&'fileQueue',&&'fileSizeLimit'&:&'',&&&'formData'&&&&&&:{'userId':userId},&&'progressData'&&:&'percentage',&&&&'buttonText'&&&&:&'添加附件',&&&'auto'&&&&&&&&&&:&false,&&&'multi'&&&&&:&false,&&&'removeComplete':&false,&&&'onQueueComplete'&&&&:&function&(queueData){&&&&&&&&&&&alert(&上传完毕！&);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&});&&
补充：uploadify上传时，只要一初始化就会发出一个请求，而这个请求是当前页面的地址，
解决方法是：
将jquery.uploadify.min.js（我用的版本是3.2）原来的代码：
1&this.settings.upload_url&=&pleteURL(this.settings.upload_url);this.settings.button_image_url&=&pleteURL(this.settings.button_image_url)&&
1&this.settings.upload_url&=&pleteURL(this.settings.upload_url);this.settings.button_image_url&=&this.settings.button_image_url&?&pleteURL(this.settings.button_image_url)&:&this.settings.button_image_url&&
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：241880次
积分：3198
积分：3198
排名：第6160名
原创：58篇
转载：99篇
评论：38条
(5)(3)(2)(4)(5)(2)(1)(2)(1)(12)(3)(2)(17)(5)(7)(16)(10)(9)(4)(1)(1)(4)(1)(1)(4)(2)(19)(5)(4)(4)(3)(3)有没有jquery uploadify的例子 php 带上传和取消和进度的 在线等 谢谢！_百度知道
有没有jquery uploadify的例子 php 带上传和取消和进度的 在线等 谢谢！
javascript 只想用jquery uploadify实现简单的文件上传功能，我不会更改上传地址 （folder写上去没反应） 我只想实现上传 取消 进度 有谁会吗，但是网上的都是asp版本的配制方法我只会简单的php
我有更好的答案
网站应该有很多关于php上传的例子吧，有什么不懂可以多多学习。
我自己就做了一个 但是没有进度条 所以想试试jquery uploadify
在比较新的浏览器可正常使用
其他类似问题
为您推荐：
uploadify的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁HTML5 or Flash Multiple File Upload jQuery Plugin Script
Highly Customizable
Almost every aspect of Uploadify is fully customizable so you can create the uploader that suits your site perfectly.
Two Awesome Versions
Versions are available in both Flash and HTML5 for ultimate compatibility.
Fallback methods allow for graceful degredation.
Large Support Community
Uploadify has a huge community of users with answers to your questions.当前访客身份：游客 [
当前位置：
今天做一个图片上传的工具类，前台用uploadify的插件，需要动态的传递参数到后台，使用官方文档里的settings方法设置：
$("#file_upload").uploadify("settings","formData",{"type":"wsxk","folder":"company","csbh":1000001});
但是后台用request.getParment("");接收不到参数，都是null。。。。。
求解 &。。。 &急 &。。。。。 &在线等。。。。。。
共有1个答案
<span class="a_vote_num" id="a_vote_num_
方法名(HttpServletRequest request, @RequestParam MultipartFile fileInput) & &用MultipartFile接收，试试
更多开发者职位上
有什么技术问题吗？
随遇_而安的其它问题
类似的话题}