jQuery Uploadify在ASP.NET MVC3中的使用

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

时间： 2024-10-12 19:18:54

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

使用jQuery Uploadify在ASP.NET 上传附件 (转)

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuery Uploadify在ASP.NET MVC3中的使用 和 Asp.net Mvc中使用uploadify实现图片缩放保存. 本文是一个简单的介绍Demo,主要是动态传递参数方法:通过formdata 向处理程序传递额外的表单数据: <!DOCTYPE html PUBLIC "-//W3C

ASP.NET MVC3中Model验证

原文:ASP.NET MVC3中Model验证 概述 上节我们学习了Model的数据在界面之间的传递,但是很多时候,我们在数据传递的时候为了确保数据的有效性,不得不给Model的相关属性做基本的数据验证. 本节我们就学习如何使用 System.ComponentModel.DataAnnotations 命名空间中的特性指定对数据模型中的各个字段的验证. 这些特性用于定义常见的验证模式,例如范围检查和必填字段.而 DataAnnotations 特性使 MVC 能够提供客户端和服务器验证检查,使

ASP.NET MVC3中使用IClientValidatable接口实现客户端和服务器端同时验证

例如:Range.RegularExpression.Required.StringLength等验证属性,这些属性极大的方便了服务器端的验证,同时我们还可以自定义验证属性来满足我们特殊的需求,MVC3的出现进一步提升了验证的便捷性,具体体现在,新增了IValidatableObject和IClientValidatable接口,以及默认支持Range.RegularExpression.Required.StringLength等验证属性在客户端和服务器端进行验证. IValidatableO

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

</pre>在ASP.NET MVC<span style="font-family:宋体">中,经常会在</span>Controller<span style="font-family:宋体">与</span>View<span style="font-family:宋体">之间传递数据,因此,熟练.灵活的掌握这两层之间的数据传递方法就非常重要.本文从两个方面进行探讨:&

[转]在ASP.NET MVC3中使用EFCodeFirst 1.0

本文转自:http://kb.cnblogs.com/page/97003/ 作者: NinoFocus  来源: 博客园  发布时间: 2011-04-12 10:41  阅读: 11971 次  推荐: 11                   原文链接   [收藏] 1. 新建项目 打开VS2010,选择 文件>新建>项目,新建ASP.NET MVC3 Web 应用程序,我这里把它命名为Blog. 2. 编写实体类 对于一个博客,一下几个类应该是必须的吧: Post           

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

在ASP.NET MVC中,经常会在Controller与View之间传递数据,因此,熟练.灵活的掌握这两层之间的数据传递方法就非常重要.本文从两个方面进行探讨: 一.  Controller向View传递数据 1.       使用ViewData传递数据 我们在Controller中定义如下: [csharp] view plain copy print? ViewData["Message_ViewData"] = " Hello ViewData!"; Vi

基于jquery.uploadify的asp.net大文件上传

以前项目的上传都是十几兆的文件,虽然没有进度条,但客户端响应比较快,客户还能接受.在新项目中,客户提供的Excel,要求导入到系统中,但Excel偶尔会将近百兆,客户对上传的使用体验提出了要求.后来在园子里找了朋友写的博客,加上自己的整理,最终实现了基于asp.net的带进度条的百兆文件上传. 在这里首先感谢两位园友,在这里附上参考的两位园友的博客. 马维拉的真实之眼:http://www.cnblogs.com/telephoner/p/3185081.html oec2003:http://

如何在asp.net mvc3中使用HttpStatusCode

下载了asp.net mvc 4的源码看了看,没怎么看清楚.不过个人觉得MVC4 beta中Web API这个是比较不错的,虽然说它是往传统回归. web api最好的莫过于它更加适合使用jquery的ajax调用. 我这里主要给大家说明下如何在asp.net mvc 3中借鉴Web API的特性来让AJAX调用更加酷. 首先给大家看个例子,传统的asp.net mvc 3中异步调用的Response: Action如下: 相应的jquery ajax请求代码(只是简单的代码,): 我们来运行看

jQuery Uploadify上传插件

jQuery Uploadify在ASP.NET MVC3中的使用 1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. Uploadify官方网址:http://www.uploadify.com/ jQuery Uploadify上传插件