冠军

导航

在 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. 现在,你就已经可以上传一张图片了。而且还带有一个漂亮的进度条。

 

posted on 2013-04-27 22:39  冠军  阅读(15529)  评论(43编辑  收藏  举报