Jquery Uploadify实现文件的异步上传

原文出自：http://www.cnblogs.com/libingql/archive/2012/09/11/2681007.html

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设置允许上传的最大文件大小：

<system.web>
　　<!--设置最大允许上传文件大小1G-->
　　<httpRuntime maxRequestLength= "102400" executionTimeout= "60" />
</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>

兼容 jquery-1.11.1.min.js IE中可用！

缺点：不兼容火狐浏览器！

posted on 2015-07-06 18:33 小呀么小二郎阅读(964) 评论(0) 收藏举报

刷新页面返回顶部

小呀么小二郎

Jquery Uploadify实现文件的异步上传

导航

公告