1、Uploadify简介

Uploadify是基于jQuery的一种上传插件，支持多文件、带进度条显示上传，在项目开发中常被使用。

Uploadify官方网址：http://www.uploadify.com/

2、ASP.NET MVC3中的使用Uploadify

搭建ASP.NET MVC3解决方案如下图，其中使用到的Uploadify为3.1版本：

　　1>、简单示例

_Layout.cshtml代码：

<!DOCTYPE html>

<html>

<head>

    <title>@ViewBag.Title</title>

    @RenderSection("Header")

</head>

<body>

    @RenderBody()

</body>

</html>

Index.cshtml代码：

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@section Header{

    <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#file_upload').uploadify({

                'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',

                'uploader'   : '/Home/Upload'

            });

        });

    </script>

    <style type="text/css">

        body

        {

            font-size: 12px;

        }

        .tip

        {

            height: 20px;

            border-bottom: 1px solid #CCC;

            margin-bottom: 10px;

        }

    </style>

}

<div class="tip">

    jQuey Uploadify上传文件示例：

</div>

<input type="file" id="file_upload" name="file_upload" />

HomeController.cs代码:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.IO;

namespace WebUI.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult Index()

        {

            return View();

        }

        [AcceptVerbs(HttpVerbs.Post)]

        public JsonResult Upload(HttpPostedFileBase fileData)

        {

            if (fileData != null)

            {

                try

                {

                    // 文件上传后的保存路径

                    string filePath = Server.MapPath("~/Uploads/");

                    if (!Directory.Exists(filePath))

                    {

                        Directory.CreateDirectory(filePath);

                    }

                    string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称

                    string fileExtension = Path.GetExtension(fileName); // 文件扩展名

                    string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称

                    fileData.SaveAs(filePath + saveName);

                    return Json(new { Success = true, FileName = fileName, SaveName = saveName });

                }

                catch (Exception ex)

                {

                    return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);

                }

            }

            else

            {

                return Json(new { Success = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);

            }

        }

    }

}

上传效果图：

2>、设置上传图片大小

ASP.NET MVC默认情况下，允许上传的文件大小最大为4MB。因此在默认情况下，Uploadify也只能最大上传4MB大小的文件，超过范围则会IO报错提示无法上传。

修改Web.config设置允许上传的最大文件大小：

<system.web>

　　<!--设置最大允许上传文件大小1G-->

　　<httpRuntime maxRequestLength= "102400" executionTimeout= "60" />

</system.web>

　　修改最大上传文件大小后效果：

3>、Uploadify常用属性设置

 auto：是否选择文件后自动上传，默认为true。

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@section Header{

    <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#file_upload').uploadify({

                'auto'       : false,

                'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',

                'uploader'   : '/Home/Upload'

            });

        });

    </script>

    <style type="text/css">

        body

        {

            font-size: 12px;

        }

        .tip

        {

            height: 20px;

            border-bottom: 1px solid #CCC;

            margin-bottom: 10px;

        }

    </style>

}

<div class="tip">

    jQuey Uploadify上传文件示例：

</div>

<div>

    <input type="file" id="file_upload" name="file_upload" />

</div>

<div>

    <a href="javascript:$('#file_upload').uploadify('upload');">上传</a>

</div>

 buttonText：设置上传按钮显示文字。

<script type="text/javascript">

    $(function () {

        $('#file_upload').uploadify({

            'buttonText'       : '请选择上传文件',

            'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',

            'uploader'   : '/Home/Upload'

        });

    });

</script>

buttonImage：设置上传按钮背景图片。

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@section Header{

    <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#file_upload').uploadify({

                'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',

                'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',

                'uploader': '/Home/Upload'

            });

        });

    </script>

    <style type="text/css">

        body

        {

            font-size: 12px;

        }

        .tip

        {

            height: 20px;

            border-bottom: 1px solid #CCC;

            margin-bottom: 10px;

        }

        .uploadify-button

        {

            background-color: transparent;

            border: none;

            padding: 0;

        }

        .uploadify:hover .uploadify-button

        {

            background-color: transparent;

        }

    </style>

}

<div class="tip">

    jQuey Uploadify上传文件示例：

</div>

<div>

    <input type="file" id="file_upload" name="file_upload" />

</div>

multi：是否允许一次选择多个文件一起上传，默认为true。

<script type="text/javascript">

    $(function () {

        $('#file_upload').uploadify({

            'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',

            multi: true,

            'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',

            'uploader': '/Home/Upload'

        });

    });

</script>

fileTypeDesc：设置允许上传图片格式描述；

fileTypeExts：设置允许上传图片格式。

<script type="text/javascript">

    $(function () {

        $('#file_upload').uploadify({

            'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',

            'fileTypeDesc': '图片文件',

            'fileTypeExts': '*.gif; *.jpg; *.png',

            'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',

            'uploader': '/Home/Upload'

        });

    });

</script>

removeCompleted：设置已完成上传的文件是否从队列中移除，默认为true。

$(function() {

    $("#file_upload").uploadify({

        'removeCompleted' : false,

        'swf'             : '/uploadify/uploadify.swf',

        'uploader'        : '/uploadify/uploadify.php'

    });

});

queueSizeLimit：设置上传队列中同时允许的上传文件数量，默认为999。

$(function() {

    $("#file_upload").uploadify({

        'queueSizeLimit' : 1,

        'swf'            : '/uploadify/uploadify.swf',

        'uploader'       : '/uploadify/uploadify.php'

    });

});

uploadLimit：设置允许上传的文件数量，默认为999。

$(function() {

    $("#file_upload").uploadify({

        'swf'         : '/uploadify/uploadify.swf',

        'uploader'    : '/uploadify/uploadify.php',

        'uploadLimit' : 1

    });

});

4>、Uploadify常用事件设置

        onUploadComplete:单个文件上传完成时触发事件。

$(function() {

    $("#file_upload").uploadify({

        'swf'              : '/uploadify/uploadify.swf',

        'uploader'         : '/uploadify/uploadify.php',

        'onUploadComplete' : function(file) {

            alert('The file ' + file.name + ' finished processing.');

        }

    });

});

onQueueComplete：队列中全部文件上传完成时触发事件。

$(function() {

    $("#file_upload").uploadify({

        'swf'      : '/uploadify/uploadify.swf',

        'uploader' : '/uploadify/uploadify.php',

        'onQueueComplete' : function(queueData) {

            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');

        }

    });

});

        onUploadSuccess：单个文件上传成功后触发事件。

<script type="text/javascript">

    $(function () {

        $('#file_upload').uploadify({

            'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',

            'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',

            'uploader': '/Home/Upload',

            'onUploadSuccess': function (file, data, response) {

                eval("data=" + data);

                alert('文件 ' + file.name + ' 已经上传成功，并返回 ' + response + ' 保存文件名称为 ' + data.SaveName);

            }

        });

    });

</script>

4>、Uploadify常用方法

         upload：上传文件

cancel：取消上传

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@section Header{

    <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#file_upload').uploadify({

                'auto'         : false,

                'buttonImage'  : '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',

                'swf'          : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',

                'uploader'     : '/Home/Upload'

            });

        });

    </script>

    <style type="text/css">

        body

        {

            font-size: 12px;

        }

        .tip

        {

            height: 20px;

            border-bottom: 1px solid #CCC;

            margin-bottom: 10px;

        }

        .uploadify-button

        {

            background-color: transparent;

            border: none;

            padding: 0;

        }

        .uploadify:hover .uploadify-button

        {

            background-color: transparent;

        }

    </style>

}

<div class="tip">

    jQuey Uploadify上传文件示例：

</div>

<div>

    <input type="file" id="file_upload" name="file_upload" />

</div>

<div>

    <a href="javascript:$('#file_upload').uploadify('upload');">上传第一个</a>

    <a href="javascript:$('#file_upload').uploadify('upload','*');">上传队列</a>

    <a href="javascript:$('#file_upload').uploadify('cancel');">取消第一个</a>

    <a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消队列</a>

</div>

3、示例代码附件

jQueryUploadifyDemo.rar

jQuery Uploadify在ASP.NET MVC3中的使用的更多相关文章

  1. jQuery Uploadify在ASP.NET MVC中的使用

    感谢http://www.cnblogs.com/libingql/archive/2012/09/11/2681007.html 除此之外,给大家推荐一个: http://gallery.kissy ...

  2. 使用jQuery Uploadify在ASP.NET 上传附件

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuer ...

  3. 在ASP.NET MVC3 中利用Jsonp跨域访问

    在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...

  4. (转)在ASP.NET MVC3 中利用Jsonp跨域访问

    原文地址:http://www.cnblogs.com/skm-blog/p/3431999.html 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用 ...

  5. 在ASP.NET MVC3 中利用JSONP跨域登录WEB系统

    在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复登陆.每次登录都需要输入用户名和密码.最近比较流行的就 ...

  6. ASP.NET MVC3中Model验证

    原文:ASP.NET MVC3中Model验证 概述 上节我们学习了Model的数据在界面之间的传递,但是很多时候,我们在数据传递的时候为了确保数据的有效性,不得不给Model的相关属性做基本的数据验 ...

  7. Asp.net MVC3 中，动态添加filter

    Asp.net MVC3 中,动态添加filter filter是attribute,不支持泛型,传入的参数必须是固定的值.总之很受attribute本身的限制. 发现一篇老外的文章,动态设置filt ...

  8. Asp.net MVC3中全局图片防盗链

    怎么样在Asp.Net MVC3中做到全局图片防盗链?如果熟悉Asp.Net的页面生命周期,相信解决这个问题应该很容易.下面就演示一下如何去做? 一.首先是全局的,我们肯定要在Global.asax文 ...

  9. ASP.NET MVC3中Controller与View之间的数据传递总结

    一.  Controller向View传递数据 1.       使用ViewData传递数据 我们在Controller中定义如下: ViewData["Message_ViewData& ...

随机推荐

  1. CAD二次开发控件，dwg控件，网页DWG控件，手机浏览编辑DWG控件

    梦想绘图插件5.2(MxDraw5.2) 是国内最强,最专业的CAD开发插件(控件),不需要AutoCAD就能独立运行. 控件使用VC 2010开发,具有30万行代码规模,最早从2007年第一个版本完 ...

  2. ThinkPHP---ue编辑器

    [一]简介 (1)介绍 一款百度开发的JS插件 ue编辑器,全称Ueditor(翻译为你的编辑器),百度开发的在线编辑器,是一款在线编辑器软件,在线编辑器又称为“富文本编辑器”. 国外也有一款类似的编 ...

  3. 01C++编辑编译运行环境

    C++编辑编译运行环境 Bloodshed Dev-C++ Microsoft Visual Studio

  4. 【6.24校内test】T1 江城唱晚

    [题目背景] 墙角那株海棠,是你种下的思念. 生死不能忘,高烛照容颜. 一曲江城唱晚,重忆当年坐灯前, 青衫中绣着你留下的线. ——银临<江城唱晚> [问题描述] 扶苏是个喜欢一边听古风歌 ...

  5. Win实用好用软件清单推荐

    1. 我的Win实用软件清单 排名不分先后且长期更新 有更好用的或者需要帮助的可以留言----最后一次更新于 2019.06.25 1. Dism++ 1.1. 功能: ​ 系统精简.垃圾清理.系统升 ...

  6. Extjs查询实现

    效果图如上: 页面代码: Ext.QuickTips.init(); //放在图标上会自动提示信息 Ext.define('ExtApp.view.StudentList' , { extend : ...

  7. 洛谷——P1120 小木棍 ［数据加强版］

    P1120 小木棍 ［数据加强版］ 题目描述 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过5050. 现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍 ...

  8. Ubuntu安装Foxit PDF阅读器

    最近使用Ubuntu自带的PDF阅读器,发现使用体验较差,打算安装FoxitReader(可能是我习惯了Foxit和Adobe) Foxit官网 对系统平台要求如下:(支持Linux) 继续摸索了一下 ...

  9. 洛谷 1984 [SDOI2008]烧水问题

    [题解] 烧开每一杯水之后都用它去把其他没烧开的水焐热,这样显然是最优的.然后推推式子或者列表找规律就好了. #include<cstdio> #include<algorithm& ...

  10. UVA - 10825 Anagram and Multiplication

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=34594 有一个m位n进制的数,它的特性是这个数依次乘以2,3... ...