你使用过 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 的样式表，样式表提供了按钮的外观，默认它还会提供一个上传进度，并且支持取消的，如果没有样式表，效果就出不来。

  1. <link href="~/uploadify/uploadify.css" rel="stylesheet" />

需要注意的是，样式表中取消按钮的图片默认使用网站根目录下 img 文件夹中的图片，其实，这个图片与样式表在同一个文件夹中，注意修改一下文件的第 74 行。

  1. .uploadify-queue-item .cancel a {
  2.     background: url('./uploadify-cancel.png')   no-repeat;
  3.     float: right;
  4.     height:    16px;
  5.     text-indent: -9999px;
  6.     width: 16px;
  7. }

7. 在 Index.cshtml 中引入使用的脚本库。

  1.     <script src="~/uploadify/jquery-1.9.1.min.js"></script>
  2.     <script src="~/uploadify/jquery.uploadify.min.js"></script>

8. 在 Index.cshtml 视图中，加入一个 id 为 uploadify 的元素，这个元素用来显示为一个按钮，用户点击之后用来弹出选择上传文件的选择窗口。这启用上传之后，这个元素将会被隐藏起来。

  1. <span id="uploadify"></span>

9. 插入启用上传的脚本。

  1. $('#uploadify').uploadify({
  2.     uploader: '/home/upload',           // 服务器端处理地址
  3.     swf: '/uploadify/uploadify.swf',    // 上传使用的 Flash
  4.  
  5.     width: ,                          // 按钮的宽度
  6.     height: ,                         // 按钮的高度
  7.     buttonText: "上传",                 // 按钮上的文字
  8.     buttonCursor: 'hand',                // 按钮的鼠标图标
  9.  
  10.     fileObjName: 'Filedata',            // 上传参数名称
  11.  
  12.     // 两个配套使用
  13.     fileTypeExts: "*.jpg;*.png",             // 扩展名
  14.     fileTypeDesc: "请选择 jpg png 文件",     // 文件说明
  15.  
  16.     auto: true,                // 选择之后，自动开始上传
  17.     multi: true,               // 是否支持同时上传多个文件
  18.     queueSizeLimit:           // 允许多文件上传的时候，同时上传文件的个数
  19. });

10. 整个页面的内容如下所示。

  1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>uploadify 3.2 文件上传的基本实现</title>
  11.     <link href="~/uploadify/uploadify.css" rel="stylesheet" />
  12. </head>
  13. <body>
  14.     <h1>uploadify 3.2 文件上传的基本实现</h1>
  15.     <p>
  16.         使用了  个参数
  17.         <ul>
  18.             <li>uploader: 服务器端接收上传文件的地址</li>
  19.             <li>swf：用来实现客户端支持的 Flash</li>
  20.  
  21.             <li>width：按钮的宽度</li>
  22.             <li>height：按钮的高度</li>
  23.             <li>buttonText: 上传按钮的文字</li>
  24.             <li>buttonCursor：按钮的鼠标图标</li>
  25.  
  26.             <li>fileObjName：上传文件的请求参数名称</li>
  27.  
  28.             <li>fileTypeExts：上传文件过滤使用的扩展名</li>
  29.             <li>fileTypeDesc：上传文件的类型描述</li>
  30.  
  31.             <li>auto：选择之后，是否自动开始上传</li>
  32.             <li>multi：是否允许上传多个文件</li>
  33.             <li>queueSizeLimit：同时选择多个文件的限额</li>
  34.         </ul>
  35.     </p>
  36.     <span id="uploadify"></span>
  37.  
  38.     <script src="~/uploadify/jquery-1.9.1.min.js"></script>
  39.     <script src="~/uploadify/jquery.uploadify.min.js"></script>
  40.     <script type="text/javascript">
  41.         $(function () {
  42.  
  43.             $('#uploadify').uploadify({
  44.                 uploader: '/home/upload',           // 服务器端处理地址
  45.                 swf: '/uploadify/uploadify.swf',    // 上传使用的 Flash
  46.  
  47.                 width: ,                          // 按钮的宽度
  48.                 height: ,                         // 按钮的高度
  49.                 buttonText: "上传",                 // 按钮上的文字
  50.                 buttonCursor: 'hand',                // 按钮的鼠标图标
  51.  
  52.                 fileObjName: 'Filedata',            // 上传参数名称
  53.  
  54.                 // 两个配套使用
  55.                 fileTypeExts: "*.jpg;*.png",             // 扩展名
  56.                 fileTypeDesc: "请选择 jpg png 文件",     // 文件说明
  57.  
  58.                 auto: true,                // 选择之后，自动开始上传
  59.                 multi: true,               // 是否支持同时上传多个文件
  60.                 queueSizeLimit:           // 允许多文件上传的时候，同时上传文件的个数
  61.             });
  62.         });
  63.     </script>
  64. </body>
  65. </html>

11. 打开页面之后，使用 FireBug 可以看到按钮已经被替换了。

12. 创建用于上传的 Upload Action 方法，这个方法不需要对应的视图。服务器端接收上传文件使用一个名为 Upload 的 Action 完成，上传参数的名称由 fileObjName 设置，上传是否正确取决于返回的 Http 状态码，如果返回 2XX 表示正确，否则错误。默认的返回状态码就是 200.

在网站的根目录下创建一个名为 photos 的文件夹，用来保存上传的文件。

  1. public ActionResult Upload(HttpPostedFileBase Filedata)
  2. {
  3.     // 如果没有上传文件
  4.     if (Filedata == null ||
  5.         string.IsNullOrEmpty(Filedata.FileName) ||
  6.         Filedata.ContentLength == )
  7.     {
  8.         return this.HttpNotFound();
  9.     }
  10.  
  11.     // 保存到 ~/photos 文件夹中，名称不变
  12.     string filename = System.IO.Path.GetFileName(Filedata.FileName);
  13.     string virtualPath =
  14.         string.Format("~/photos/{0}", filename);
  15.     // 文件系统不能使用虚拟路径
  16.     string path = this.Server.MapPath(virtualPath);
  17.  
  18.     Filedata.SaveAs(path);
  19.     return this.Json(new { });
  20. }

13. 现在，你就已经可以上传一张图片了。而且还带有一个漂亮的进度条。

MVC4中使用Uploadify3.2的更多相关文章

  1. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  2. Autofac在MVC4中牛刀小试

    Autofac是传说中速度最快的一套.NET高效的依赖注入框架.Autofac的介绍与使用请去参考Autofac全面解析系列(版本:3.5).   这里介绍的已经挺详细的啦. 下面我就先来说说MVC4 ...

  3. ASP.NET MVC4中的bundles特性引发服务器拒绝访问（403错误）

    在ASP.NET MVC4中微软引入了bundles特性,这个特性可以将服务器端的多个Javascript或多个css文件捆绑在一起作为一个单一的URL地址供客户端浏览器调用,从而减少了页面上Http ...

  4. MVC4中使用Ninject

    MVC4中使用Ninject 1.NuGet获取Ninject.dll .NET技术交流群 199281001 .欢迎加入. 2.全局注册  Global.asax.cs  RegisterNinje ...

  5. mvc4中jquery-ui日期控件datepicker的应用

    mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...

  6. WebSocket在ASP.NET MVC4中的简单实现

    WebSocket在ASP.NET MVC4中的简单实现 2013-12-21 20:48 by 小白哥哥, 810 阅读, 3 评论, 收藏, 编辑 WebSocket 规范的目标是在浏览器中实现和 ...

  7. ASP.NET MVC4中使用NHibernate

    ASP.NET MVC4中使用NHibernate 1:下载安装NHibernate 打开 VS 2012新建一个 MVC4项目. 在项目名称上右击选择Manage NuGet Packages.你会 ...

  8. MVC4中使用SignalR

    MVC4中使用SignalR 前言 周末在偶尔翻阅微软官网的时候看到Getting Started with SignalR and MVC 4此篇文章,知道了signalr这个东西,貌似这个出来很长 ...

  9. MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates)

    转载于: MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates) 虽然 [Display(Name="XX ...

随机推荐

  1. Gartner：影响2019年基础设施和运营的十大趋势

    ​​关注嘉为科技,获取运维新知 基础设施和运营(I&O)正越来越多地涉及现代企业的前所未有的领域.比起数据中心.托管和云等技术元素,I&O领导者们更多地着眼于如何让组织的基础架构和运营 ...

  2. Sonya and Matrix CodeForces - 1004D (数学,构造)

    http://codeforces.com/contest/1004/problem/D 题意:网格图给定到中心点的曼哈顿距离数组, 求该图n,m及中心点位置 首先可以观察到距离最大值mx一定在某个角 ...

  3. activiti部署流程定义时出错：INSERT INTO ACT_GE_BYTEARRAY，修改数据库编码

    activiti部署流程定义时出错 // 部署流程定义 Deployment deployment = deploymentBuilder.deploy(); 错误信息:(有乱码的...没留下截图.. ...

  4. node模块之path——path.join和path.resolve的区别

    1.path.join([...paths]) path.join() 方法使用平台特定的分隔符把全部给定的 path 片段连接到一起,并规范化生成的路径. 长度为零的 path 片段会被忽略. 如果 ...

  5. 自定义alert弹框，title不显示域名

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  6. Connection parameters are correct , SSL not enabled

    这个仅仅是个消息提示,告诉你SSL not enabled.无须理会,直接点击ok

  7. PinkEx专用图标

  8. swagger访问api, TypeError: Failed to fetch

    用swagger访问https://localhost:44360/api/ads/1, 得到的结果是 TypeError: Failed to fetch.一开始以为是后端代码问题,检查了好久,才发 ...

  9. angular4,angular6中解决内层盒子到底外层盒子滚动

    //用来处理 里盒子滚完外盒子滚的问题 scrollUnique(who){ document.getElementsByClassName(who)[0].addEventListener('mou ...

  10. [转载] JAVA面试题和项目面试核心要点精华总结（想进大公司必看）

    JAVA面试题和项目面试核心要点精华总结(想进大公司必看) JAVA面试题和项目面试核心要点精华总结(想进大公司必看)