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 { });
}

在 MVC4 中使用 Uploadify 3.2 - 1的更多相关文章

  1. MVC4中使用Uploadify3.2

    你使用过 GMail 中附件上传吗?带有上传进度,可以取消正在进行的上传,使用 Uploadify 插件,你也可以做到. Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技 ...

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

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

  3. Autofac在MVC4中牛刀小试

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

  4. ASP.NET MVC4中的bundles特性引发服务器拒绝访问(403错误)

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

  5. MVC 中使用uploadify上传图片遇到的蛋疼问题

    MVC 中使用uploadify上传图片遇到的蛋疼问题 初次使用uploadify上传图片,遇到了一些比较纠结的问题,在这里和大家分享下,有不对的地方还望大神多多指教,希望对刚接触的朋友有所帮助,文采 ...

  6. MVC4中使用Ninject

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

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

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

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

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

  9. ASP.NET MVC4中使用NHibernate

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

随机推荐

  1. 寒冰王座(DGA最长路/完全背包)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  2. wpf ,tooltip的style

    <Style x:Key="MyToolTipStyle" TargetType="ToolTip"> <Setter Property=&q ...

  3. HBase 分布式环境搭建

    一.前期环境 安装概览 IP Host Name Software Node 192.168.23.128 ae01 JDK 1.7, Zookeeper-3.4.5 HMaster 192.168. ...

  4. java基础-数组

    浏览以下内容前,请点击并阅读 声明 定义:数组是一个能容纳固定数量,类型单一的若干个值的容器.注意,数组是一个对象. 数组一旦创建,则其长度固定不变,数组中的所有值叫元素(Element),获取元素要 ...

  5. 2014-2015 ACM-ICPC, NEERC, Moscow Subregional Contest F. Friends

    F. Friends time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  6. Arima拟合函数,se出现NaN问题

    R语言Arima函数拟合模型,se(标准误)出现NaN的问题. 参考了网上的资料,虽然不太明白是什么意思,但是这样的模型不能用. 参考:http://stackoverflow.com/questio ...

  7. [Java] java.util.Arrays 中使用的 sort 采用的算法 (转)

    http://book.douban.com/annotation/15154366/Q: java.util.Arrays 中使用的 sort 采用的是什么算法?   A: java中Arrays. ...

  8. [Cocos2D-x For WP8]CocosDenshion音频播放

    Cocos2D-x的音频分为长时间的背景音乐和短的音效两种,我们可以通过SimpleAudioEngine::sharedEngine()方法来获取音频播放的引擎,然后调用对音频相关的操作方法就可以了 ...

  9. win8.1上wamp环境中利用apache自带ab压力测试工具使用超简单讲解

    2015.10.4apache自带ab压力测试工具使用:本地环境:win8.1 wampserver2.5 -Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b 可以参考一 ...

  10. Code[VS]1690 开关灯 题解

    Code[VS]1690 开关灯 题解     时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description:     YYX家门前 ...