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中可用!
缺点:不兼容火狐浏览器!