本文主要是介绍在 MVC4 中使用 Uploadify 3.2 - 1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
你使用过 GMail 中附件上传吗？带有上传进度，可以取消正在进行的上传，使用 Uploadify 插件，你也可以做到。
Uploadify 是 JQuery 一个著名的上传插件，利用 Flash 技术，Uploadify 越过浏览器的限制，控制了整个上传的处理过程，实现了客户端无刷新的文件上传，这样就实现了在客户端的上传进度控制，所以，你首先要确定浏览器中已经安装了 Adobe 的 Flash 插件。
一. 下载软件包
目前，最新的版本是 3.2, 可以在官方网站下载到。地址：http://www.uploadify.com/download/
有两个版本，基于 Flash 是免费的，还有基于 HTML5 的收费版，我们使用免费版。
有的时候访问会有问题，如果你访问不了这个网站，点击这里可以直接下载。
在上传过程中，Uploadify 使用标准的 HTTP 协议进行文件上传，这样，在服务器端，我们就可以使用标准的文件上传技术来获取浏览器上传的文件。
下面我们在 MVC4 的应用程序中使用 Uploadify 实现无刷新的上传。
二. 使用步骤
1. 创建标准的 MVC4 应用程序.
2. 选择空的网站模版。
3. 创建之后的项目，如图所示。
4. 将下载的压缩包解压之后，粘贴到项目中。需要注意的是，压缩包中并没有直接包含 jQuery 的脚本库，这里我们自己添加了 1.9.1 的 jQuery 脚本库。如图所示。
5. 创建 Home 控制器，添加 Index Action 以及视图
6. 引入 uploadify 的样式表，样式表提供了按钮的外观，默认它还会提供一个上传进度，并且支持取消的，如果没有样式表，效果就出不来。
<link href="~/uploadify/uploadify.css" rel="stylesheet" />
需要注意的是，样式表中取消按钮的图片默认使用网站根目录下 img 文件夹中的图片，其实，这个图片与样式表在同一个文件夹中，注意修改一下文件的第 74 行。
.uploadify-queue-item .cancel a {background: url('./uploadify-cancel.png') 0 0 no-repeat;float: right;height: 16px;text-indent: -9999px;width: 16px; }
7. 在 Index.cshtml 中引入使用的脚本库。
<script src="~/uploadify/jquery-1.9.1.min.js"></script><script src="~/uploadify/jquery.uploadify.min.js"></script>
8. 在 Index.cshtml 视图中，加入一个 id 为 uploadify 的元素，这个元素用来显示为一个按钮，用户点击之后用来弹出选择上传文件的选择窗口。这启用上传之后，这个元素将会被隐藏起来。
<span id="uploadify"></span>
8. 插入启用上传的脚本。
$('#uploadify').uploadify({uploader: '/home/upload', // 服务器端处理地址swf: '/uploadify/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度height: 23, // 按钮的高度buttonText: "上传", // 按钮上的文字buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称// 两个配套使用fileTypeExts: "*.jpg;*.png", // 扩展名fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: true, // 选择之后，自动开始上传multi: true, // 是否支持同时上传多个文件queueSizeLimit: 5 // 允许多文件上传的时候，同时上传文件的个数
}); 8. 整个页面的内容如下所示。
@{Layout = null; }<!DOCTYPE html><html> <head><meta name="viewport" content="width=device-width" /><title>uploadify 3.2 文件上传的基本实现</title><link href="~/uploadify/uploadify.css" rel="stylesheet" /> </head> <body><h1>uploadify 3.2 文件上传的基本实现</h1><p>使用了 12 个参数<ul><li>uploader: 服务器端接收上传文件的地址</li><li>swf：用来实现客户端支持的 Flash</li><li>width：按钮的宽度</li><li>height：按钮的高度</li><li>buttonText: 上传按钮的文字</li><li>buttonCursor：按钮的鼠标图标</li><li>fileObjName：上传文件的请求参数名称</li><li>fileTypeExts：上传文件过滤使用的扩展名</li><li>fileTypeDesc：上传文件的类型描述</li><li>auto：选择之后，是否自动开始上传</li><li>multi：是否允许上传多个文件</li><li>queueSizeLimit：同时选择多个文件的限额</li></ul></p><span id="uploadify"></span><script src="~/uploadify/jquery-1.9.1.min.js"></script><script src="~/uploadify/jquery.uploadify.min.js"></script><script type="text/javascript">$(function () {$('#uploadify').uploadify({uploader: '/home/upload', // 服务器端处理地址 swf: '/uploadify/uploadify.swf', // 上传使用的 Flash width: 60, // 按钮的宽度 height: 23, // 按钮的高度 buttonText: "上传", // 按钮上的文字 buttonCursor: 'hand', // 按钮的鼠标图标 fileObjName: 'Filedata', // 上传参数名称// 两个配套使用 fileTypeExts: "*.jpg;*.png", // 扩展名 fileTypeDesc: "请选择 jpg png 文件", // 文件说明 auto: true, // 选择之后，自动开始上传 multi: true, // 是否支持同时上传多个文件 queueSizeLimit: 5 // 允许多文件上传的时候，同时上传文件的个数 });});</script> </body> </html>
9. 打开页面之后，使用 FireBug 可以看到按钮已经被替换了。
10. 创建用于上传的 Upload Action 方法，这个方法不需要对应的视图。服务器端接收上传文件使用一个名为 Upload 的 Action 完成，上传参数的名称由fileObjName 设置，上传是否正确取决于返回的 Http 状态码，如果返回 2XX 表示正确，否则错误。默认的返回状态码就是 200.
在网站的根目录下创建一个名为 photos 的文件夹，用来保存上传的文件。
public ActionResult Upload(HttpPostedFileBase Filedata) {// 如果没有上传文件if (Filedata == null ||string.IsNullOrEmpty(Filedata.FileName) ||Filedata.ContentLength == 0){return this.HttpNotFound();}// 保存到 ~/photos 文件夹中，名称不变string filename = System.IO.Path.GetFileName(Filedata.FileName);string virtualPath =string.Format("~/photos/{0}", filename);// 文件系统不能使用虚拟路径string path = this.Server.MapPath(virtualPath);Filedata.SaveAs(path);return this.Json(new { }); }
11. 现在，你就已经可以上传一张图片了。而且还带有一个漂亮的进度条。
这篇关于在 MVC4 中使用 Uploadify 3.2 - 1的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
