jQuery Uploadify在ASP.NET MVC3中的使用

Arce

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] jQuery Uploadify在ASP.NET MVC3中的使用

相关帖子

HTML 段落简介

HTML 链接简介

HTML 标题简介

Python 关于TCP简介以及与UDP的区别

支持刷固件的ac路由-(路由器刷ac)

MySQL让人又爱又恨的多表查询

win11不能打印怎么办？该如何解决？

32位系统支持多大内存操作方法

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

Arce LV4