1、Uploadify简介

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

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

2、ASP.NET MVC3中的使用Uploadify

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

　　1>、简单示例

_Layout.cshtml代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>@ViewBag.Title</title>
  5.     @RenderSection("Header")
  6. </head>
  7.  
  8. <body>
  9.     @RenderBody()
  10. </body>
  11. </html>

Index.cshtml代码：

  1. @{
  2.     ViewBag.Title = "Index";
  3.     Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. @section Header{
  6.     <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />
  7.     <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
  8.     <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>
  9.     <script type="text/javascript">
  10.         $(function () {
  11.             $('#file_upload').uploadify({
  12.                 'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
  13.                 'uploader'   : '/Home/Upload'
  14.             });
  15.         });
  16.     </script>
  17.     <style type="text/css">
  18.         body
  19.         {
  20.             font-size: 12px;
  21.         }
  22.         .tip
  23.         {
  24.             height: 20px;
  25.             border-bottom: 1px solid #CCC;
  26.             margin-bottom: 10px;
  27.         }
  28.     </style>
  29. }
  30. <div class="tip">
  31.     jQuey Uploadify上传文件示例：
  32. </div>
  33. <input type="file" id="file_upload" name="file_upload" />

HomeController.cs代码:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6.  
  7. using System.IO;
  8.  
  9. namespace WebUI.Controllers
  10. {
  11.     public class HomeController : Controller
  12.     {
  13.         //
  14.         // GET: /Home/
  15.  
  16.         public ActionResult Index()
  17.         {
  18.             return View();
  19.         }
  20.  
  21.         [AcceptVerbs(HttpVerbs.Post)]
  22.         public JsonResult Upload(HttpPostedFileBase fileData)
  23.         {
  24.             if (fileData != null)
  25.             {
  26.                 try
  27.                 {
  28.                     // 文件上传后的保存路径
  29.                     string filePath = Server.MapPath("~/Uploads/");
  30.                     if (!Directory.Exists(filePath))
  31.                     {
  32.                         Directory.CreateDirectory(filePath);
  33.                     }
  34.                     string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
  35.                     string fileExtension = Path.GetExtension(fileName); // 文件扩展名
  36.                     string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称
  37.  
  38.                     fileData.SaveAs(filePath + saveName);
  39.  
  40.                     return Json(new { Success = true, FileName = fileName, SaveName = saveName });
  41.                 }
  42.                 catch (Exception ex)
  43.                 {
  44.                     return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
  45.                 }
  46.             }
  47.             else
  48.             {
  49.  
  50.                 return Json(new { Success = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);
  51.             }
  52.         }
  53.     }
  54. }

上传效果图：

2>、设置上传图片大小

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

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

  1. <system.web>
  2. 　　<!--设置最大允许上传文件大小1G-->
  3. 　　<httpRuntime maxRequestLength= "102400" executionTimeout= "60" />
  4. </system.web>

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

3>、Uploadify常用属性设置

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

  1. @{
  2.     ViewBag.Title = "Index";
  3.     Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. @section Header{
  6.     <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />
  7.     <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
  8.     <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>
  9.     <script type="text/javascript">
  10.         $(function () {
  11.             $('#file_upload').uploadify({
  12.                 'auto'       : false,
  13.                 'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
  14.                 'uploader'   : '/Home/Upload'
  15.             });
  16.         });
  17.     </script>
  18.     <style type="text/css">
  19.         body
  20.         {
  21.             font-size: 12px;
  22.         }
  23.         .tip
  24.         {
  25.             height: 20px;
  26.             border-bottom: 1px solid #CCC;
  27.             margin-bottom: 10px;
  28.         }
  29.     </style>
  30. }
  31. <div class="tip">
  32.     jQuey Uploadify上传文件示例：
  33. </div>
  34. <div>
  35.     <input type="file" id="file_upload" name="file_upload" />
  36. </div>
  37. <div>
  38.     <a href="javascript:$('#file_upload').uploadify('upload');">上传</a>
  39. </div>

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

  1. <script type="text/javascript">
  2.     $(function () {
  3.         $('#file_upload').uploadify({
  4.             'buttonText'       : '请选择上传文件',
  5.             'swf'        : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
  6.             'uploader'   : '/Home/Upload'
  7.         });
  8.     });
  9. </script>

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

  1. @{
  2.     ViewBag.Title = "Index";
  3.     Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. @section Header{
  6.     <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />
  7.     <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
  8.     <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>
  9.     <script type="text/javascript">
  10.         $(function () {
  11.             $('#file_upload').uploadify({
  12.                 'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
  13.                 'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
  14.                 'uploader': '/Home/Upload'
  15.             });
  16.         });
  17.     </script>
  18.     <style type="text/css">
  19.         body
  20.         {
  21.             font-size: 12px;
  22.         }
  23.         .tip
  24.         {
  25.             height: 20px;
  26.             border-bottom: 1px solid #CCC;
  27.             margin-bottom: 10px;
  28.         }
  29.         .uploadify-button
  30.         {
  31.             background-color: transparent;
  32.             border: none;
  33.             padding: 0;
  34.         }
  35.         .uploadify:hover .uploadify-button
  36.         {
  37.             background-color: transparent;
  38.         }
  39.     </style>
  40. }
  41. <div class="tip">
  42.     jQuey Uploadify上传文件示例：
  43. </div>
  44. <div>
  45.     <input type="file" id="file_upload" name="file_upload" />
  46. </div>

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

  1. <script type="text/javascript">
  2.     $(function () {
  3.         $('#file_upload').uploadify({
  4.             'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
  5.             multi: true,
  6.             'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
  7.             'uploader': '/Home/Upload'
  8.         });
  9.     });
  10. </script>

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

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

  1. <script type="text/javascript">
  2.     $(function () {
  3.         $('#file_upload').uploadify({
  4.             'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
  5.             'fileTypeDesc': '图片文件',
  6.             'fileTypeExts': '*.gif; *.jpg; *.png',
  7.             'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
  8.             'uploader': '/Home/Upload'
  9.         });
  10.     });
  11. </script>

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

  1. $(function() {
  2.     $("#file_upload").uploadify({
  3.         'removeCompleted' : false,
  4.         'swf'             : '/uploadify/uploadify.swf',
  5.         'uploader'        : '/uploadify/uploadify.php'
  6.     });
  7. });

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

  1. $(function() {
  2.     $("#file_upload").uploadify({
  3.         'queueSizeLimit' : 1,
  4.         'swf'            : '/uploadify/uploadify.swf',
  5.         'uploader'       : '/uploadify/uploadify.php'
  6.     });
  7. });

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

  1. $(function() {
  2.     $("#file_upload").uploadify({
  3.         'swf'         : '/uploadify/uploadify.swf',
  4.         'uploader'    : '/uploadify/uploadify.php',
  5.         'uploadLimit' : 1
  6.     });
  7. });

4>、Uploadify常用事件设置

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

  1. $(function() {
  2.     $("#file_upload").uploadify({
  3.         'swf'              : '/uploadify/uploadify.swf',
  4.         'uploader'         : '/uploadify/uploadify.php',
  5.         'onUploadComplete' : function(file) {
  6.             alert('The file ' + file.name + ' finished processing.');
  7.         }
  8.     });
  9. });

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

  1. $(function() {
  2.     $("#file_upload").uploadify({
  3.         'swf'      : '/uploadify/uploadify.swf',
  4.         'uploader' : '/uploadify/uploadify.php',
  5.         'onQueueComplete' : function(queueData) {
  6.             alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
  7.         }
  8.     });
  9. });

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

  1. <script type="text/javascript">
  2.     $(function () {
  3.         $('#file_upload').uploadify({
  4.             'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
  5.             'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
  6.             'uploader': '/Home/Upload',
  7.             'onUploadSuccess': function (file, data, response) {
  8.                 eval("data=" + data);
  9.                 alert('文件 ' + file.name + ' 已经上传成功，并返回 ' + response + ' 保存文件名称为 ' + data.SaveName);
  10.             }
  11.         });
  12.     });
  13. </script>

4>、Uploadify常用方法

         upload：上传文件

cancel：取消上传

  1. @{
  2.     ViewBag.Title = "Index";
  3.     Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. @section Header{
  6.     <link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" />
  7.     <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
  8.     <script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"></script>
  9.     <script type="text/javascript">
  10.         $(function () {
  11.             $('#file_upload').uploadify({
  12.                 'auto'         : false,
  13.                 'buttonImage'  : '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
  14.                 'swf'          : '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
  15.                 'uploader'     : '/Home/Upload'
  16.             });
  17.         });
  18.     </script>
  19.     <style type="text/css">
  20.         body
  21.         {
  22.             font-size: 12px;
  23.         }
  24.         .tip
  25.         {
  26.             height: 20px;
  27.             border-bottom: 1px solid #CCC;
  28.             margin-bottom: 10px;
  29.         }
  30.         .uploadify-button
  31.         {
  32.             background-color: transparent;
  33.             border: none;
  34.             padding: 0;
  35.         }
  36.         .uploadify:hover .uploadify-button
  37.         {
  38.             background-color: transparent;
  39.         }
  40.     </style>
  41. }
  42. <div class="tip">
  43.     jQuey Uploadify上传文件示例：
  44. </div>
  45. <div>
  46.     <input type="file" id="file_upload" name="file_upload" />
  47. </div>
  48. <div>
  49.     <a href="javascript:$('#file_upload').uploadify('upload');">上传第一个</a>
  50.     <a href="javascript:$('#file_upload').uploadify('upload','*');">上传队列</a>
  51.     <a href="javascript:$('#file_upload').uploadify('cancel');">取消第一个</a>
  52.     <a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消队列</a>
  53. </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. list.sort结果是None

    错误原因:  list.sort()功能是针对列表自己内部进行排序, 不会有返回值, 因此返回为None.  举例说明: In [19]: a=["a","c" ...

  2. How To:分析ORACLE监听日志中的IP信息

    有时候需要分析出ORACLE日志监听中的IP信息,分享一个组合命令,Linux的shell下运行正常. grep "HOST=.*establish.*\* 0" listener ...

  3. springboot的jsp热部署

    使用springboot每次修改jsp都需要重新启动是不是很麻烦呢?以下是解决办法! yml格式 server: servlet: jsp: init-parameters: development: ...

  4. buf.writeInt8()函数详解

    buf.writeInt8(value, offset[, noAssert]) value {Number} 需要被写入到 Buffer 的字节 offset {Number} 0 <= of ...

  5. sublime 使用笔记

    unbuntu安装sublime---------------------------------------------sudo add-apt-repository ppa:webupd8team ...

  6. Quadtrees（四分树）

    uva 297 Quadtrees Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu Subm ...

  7. EF中避免查询重复执行的手段

    由于ef有lazyload机制,编写的查询语句往往都没有立即执行,当你轮训结果集的时候才会将查询翻译成database端的sql语句,执行sql将结果返回到方法中.但是,下次再使用前面的结果集的时候, ...

  8. 【Codeforces 279C】Ladder

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 设pre[i]表示i往前一直递增能递增多远 设aft[i]表示i往后一直递增能递增多远 如果aft[l]+pre[r]>=(r-l+1) ...

  9. 阿里云服务器Ubuntu 16.04 3安装mysql

    .更新系统 apt-get update [注意:要在root用户下] .安装mysql-server apt-get install mysql-serverapt-get install mysq ...

  10. 数据库中间件MyCat学习总结（2）——MyCat-Web原理介绍

    Mycat是一个分库分表的基于java开发的数据库中间件,使用过程中需要有一个监控系统,mycat-web应运而生.mycat-web是一个使用SpringMVC + Mybatis的监控平台,使用常 ...