jQuery上传插件Uploadify 3.2在.NET下的使用

浏览数：93 / 时间：2015年06月09日

Uploadify下载地址：http://www.uploadify.com/download/

Uploadify有flash和html5版本的，flash是免费的，flash版本也是有缺点的，只有装了flase插件的浏览器才能用这个上传控件；html5是收费的，下载的demo是php的网站项目,解压之后有用的文件有jquery.uploadify.js，jquery.uploadify.min.js，uploadify.css，uploadify.swf，uploadify-cancel.png，当然还要自己下载jquery库，把这些有用的文件添加到自己的项目中。

前台的页面代码如下：

 1 @{
 2     ViewBag.Title = "Home Page";
 3 }
 4  
 5 @section scripts{
 6     <script src="~/Scripts/jquery-1.8.2.min.js"></script>
 7     <script src="~/uploadify/jquery.uploadify.min.js"></script>
 8     <link href="~/uploadify/uploadify.css" rel="stylesheet" />
 9     <script type="text/javascript">
10         $(function () {
11             ShowUpFiles();
12             //添加界面的附件管理
13             $(‘#file_upload‘).uploadify({
14                 ‘debug‘: false,   //开启调试  
15                ‘swf‘: ‘/uploadify/uploadify.swf‘,  //FLash文件路径
16                 ‘buttonText‘: ‘浏  览‘,       //按钮文本
17                 ‘uploader‘: ‘/Home/Upload‘,    //处理文件上传Action
18                 ‘queueID‘: ‘fileQueue‘,        //队列的ID
19                 ‘queueSizeLimit‘: 10,      //队列最多可上传文件数量，默认为999
20                 ‘auto‘: false,              //选择文件后是否自动上传，默认为true
21                 ‘multi‘: true,              //是否为多选，默认为true
22                 ‘removeCompleted‘: true,   //是否完成后移除序列，默认为true
23                 ‘fileSizeLimit‘: ‘10MB‘,     //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
24                 ‘fileTypeDesc‘: ‘Image Files‘,    //文件描述
25                 ‘fileTypeExts‘: ‘*.jpg;*.rar‘,  //上传的文件后缀过滤器
26                 ‘onQueueComplete‘: function (event, data) {                 //所有队列完成后事件
27                     //ShowUpFiles();  //完成后更新已上传的文件列表
28                     alert("上传完毕！");                            //提示完成           
29                 },
30                 //上传到服务器，服务器返回相应信息到data里  
31                 ‘onUploadSuccess‘: function (file, data, response) {
32                     if (data == "suc") {
33                         ShowUpFiles();
34                     }
35                     else {
36                         alert("文件上传失败，请重试！");
37                     }
38                 },
39                 ‘onUploadStart‘: function (file) {
40                     $("#file_upload").uploadify("settings", ‘formData‘, { ‘folder‘: ‘政策法规‘, ‘guid‘: $("#Attachment_GUID").val() }); //动态传参数
41                 },
42                 ‘onUploadError‘: function (event, queueId, fileObj, errorObj) {
43                     //alert(errorObj.type + "：" + errorObj.info);
44                 },
45                 ‘onSelectError‘: function (file, errorCode, errorMsg) {
46                     switch (errorCode) {
47                         case -100:
48                             alert("上传的文件数量已经超出系统限制的" + $(‘#file_upload‘).uploadify(‘settings‘, ‘queueSizeLimit‘) + "个文件！");
49                             break;
50                         case -110:
51                             alert("文件 [" + file.name + "] 大小超出系统限制的" + $(‘#file_upload‘).uploadify(‘settings‘, ‘fileSizeLimit‘) + "大小！");
52                             break;
53                         case -120:
54                             alert("文件 [" + file.name + "] 大小异常！");
55                             break;
56                         case -130:
57                             alert("文件 [" + file.name + "] 类型不正确！");
58                             break;
59                     }
60                 },
61                 //检测FLASH失败调用  
62                 ‘onFallback‘: function () {
63                     alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
64                 }
65             });
66         });
67 
68 
69         function ShowUpFiles() {
70             $("#div_files").load("/Home/ListFile?t=" + new Date().getTime());
71         }
72 
73 
74     </script>
75 }
76 <fieldset>
77     <table style="border: 0px solid blue; width: 100%;">
78         <tr>
79             <td colspan="2">
80                 <div id="fileQueue" class="fileQueue"></div>
81             </td>
82         </tr>
83         <tr>
84             <td>
85                 <input type="hidden" id="Attachment_GUID" name="Attachment_GUID" />
86 
87                 <input id="file_upload" name="file_upload" type="file" multiple="multiple">
88             </td>
89             <td>
90                 <input type="button" id="btnUpload" onclick="javascript: $(‘#file_upload‘).uploadify(‘upload‘, ‘*‘);" value="上传" />
91                 <input type="button" id="btnCancelUpload" onclick="javascript: $(‘#file_upload‘).uploadify(‘cancel‘, ‘*‘);" value="取消" />
92             </td>
93         </tr>
94     </table>
95     <div id="div_files"></div>
96 </fieldset>

View Code

后台的代码如下：

  1 [AcceptVerbs(HttpVerbs.Post)]
  2         public ActionResult Upload(HttpPostedFileBase fileData, string guid, string folder)
  3         {
  4             if (fileData != null)
  5             {
  6                 try
  7                 {
  8                     ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
  9                     ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
 10                     ControllerContext.HttpContext.Response.Charset = "UTF-8";
 11 
 12                     // 文件上传后的保存路径
 13                     string filePath = Server.MapPath("~/UploadFiles/");
 14 
 15                     string fileName = Path.GetFileName(fileData.FileName);      //原始文件名称
 16                     string fileExtension = Path.GetExtension(fileName);         //文件扩展名 
 17                     string saveName = DateTime.Now.ToString("yyyyMMddHHmmss") + fileExtension; //保存文件名称
 18                     string savepath = filePath + DateTime.Now.ToString("yyyyMMddHHmmss") + fileExtension; //保存文件名称
 19 
 20                     bool saveResult = false;
 21                     if (fileExtension == ".rar")
 22                     {
 23                         fileData.SaveAs(savepath);
 24                         saveResult = true;
 25                     }
 26                     else
 27                     {
 28                         saveResult = MakeThumbnail(fileData.InputStream, savepath, 80, 80);
 29                     }
 30 
 31                     if (saveResult == true)
 32                     {
 33                         var model = new UploadFile
 34                          {
 35                              FileName = saveName,
 36                              UploadTime = DateTime.Now
 37                          };
 38 
 39                         UploadFileColec.Files.Add(model);
 40                     }
 41 
 42                     return Content("suc");
 43                 }
 44                 catch (Exception ex)
 45                 {
 46                     return Content("false");
 47                 }
 48             }
 49             else
 50             {
 51                 return Content("false");
 52             }
 53         }
 54 
 55         public ActionResult ListFile()
 56         {
 57             return View(UploadFileColec.Files);
 58         }
 59 
 60         //把文件转为字节（用于保存到数据库中）
 61         private byte[] ReadFileBytes(HttpPostedFileBase fileData)
 62         {
 63             byte[] data;
 64             using (Stream inputStream = fileData.InputStream)
 65             {
 66                 MemoryStream memoryStream = inputStream as MemoryStream;
 67                 if (memoryStream == null)
 68                 {
 69                     memoryStream = new MemoryStream();
 70                     inputStream.CopyTo(memoryStream);
 71                 }
 72                 data = memoryStream.ToArray();
 73             }
 74             return data;
 75         }
 76 
 77         //处理图片，转换图片为自定义大小
 78         private bool MakeThumbnail(Stream Stream, string newPath, int width, int height)
 79         {
 80             System.Drawing.Image ig = System.Drawing.Image.FromStream(Stream);
 81             int towidth = width;
 82             int toheight = height;
 83             int x = 0;
 84             int y = 0;
 85             int ow = ig.Width;
 86             int oh = ig.Height;
 87             if ((double)ig.Width / (double)ig.Height > (double)towidth / (double)toheight)
 88             {
 89                 oh = ig.Height;
 90                 ow = ig.Height * towidth / toheight;
 91                 y = 0;
 92                 x = (ig.Width - ow) / 2;
 93 
 94             }
 95             else
 96             {
 97                 ow = ig.Width;
 98                 oh = ig.Width * height / towidth;
 99                 x = 0;
100                 y = (ig.Height - oh) / 2;
101             }
102             System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);
103             System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
104             g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
105             g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
106             g.Clear(System.Drawing.Color.Transparent);
107             g.DrawImage(ig, new System.Drawing.Rectangle(0, 0, towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel);
108             try
109             {
110                 bitmap.Save(newPath, System.Drawing.Imaging.ImageFormat.Jpeg);
111                 return true;
112             }
113             catch (Exception ex)
114             {
115                 return false;
116                 throw ex;
117             }
118             finally
119             {
120                 ig.Dispose();
121                 bitmap.Dispose();
122                 g.Dispose();
123             }
124 
125         }

View Code

Uploadify Version 3.2 参数说明如下：

Options选项设置
auto   选择文件后自动上传
buttonClass   给“浏览按钮”加css的class样式
buttonCursor   鼠标移上去形状：arrow箭头、hand手型（默认）
buttonImage   鼠标移上去变换图片
buttonText   按钮文字
checkExisting   在目录中检查文件是否已上传成功（1 ture,0 false）
debug       是否显示调试框（默认不显示false）
fileObjName   设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata，$tempFile = $_FILES[‘Filedata‘][‘tmp_name‘]
fileSizeLimit   设置允许上传文件最大值B, KB, MB, GB 比如：‘fileSizeLimit‘ : ‘20MB‘
fileTypeDesc   选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认：All Files
fileTypeExts   允许上传的文件类型。格式：‘fileTypeExts‘ : ‘*.gif; *.jpg; *.png‘
formData   附带值，需要通过get or post传递的额外数据，需要结合onUploadStart事件一起使用
height       “浏览按钮”高度px
itemTemplate   <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。
method       上传方式。默认：post
multi       选择文件时是否可以【选择多个】。默认：可以true
overrideEvents   不执行默认的onSelect事件
preventCaching   随机缓存值默认true ，可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突
progressData   进度条上显示的进度:有百分比percentage和速度speed。默认百分比
queueID       给“进度条”加背景css的ID样式。文件选择后的容器ID
queueSizeLimit   允许多文件上传的数量。默认：999
removeCompleted   上传完成后队列是否自动消失。默认：true
removeTimeout   上传完成后队列多长时间后消失。默认 3秒   需要：‘removeCompleted‘ : true,时使用
requeueErrors   队列上传出错，是否继续回滚队列，即反复尝试上传。默认：false
successTimeout   上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。默认：30秒
swf       swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略
uploader   上传处理程序URL，本参数不可省略
uploadLimit   限制总上传文件数,默认是999。指同一时间，如果关闭浏览器后重新打开又可上传。
width       “浏览按钮”宽度px

Events 事件
onCancel   当取消一个上传队列中的文件时触发,删除时触发
onClearQueue   清除队列。当‘cancel‘方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数（另外的按钮）
onDestroy   取消所有的上传队列（另外的按钮）
onDialogClose   当选择文件对话框关闭时触发,不论是点的‘确定‘还是‘取消‘都会触发.如果本事件被添加进了‘overrideEvents‘参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出
onDialogOpen   当选择文件框被打开时触发,没有传过来的参数
onDisable   关闭上传
onEnable   开启上传
onFallback   检测FLASH失败调用
onInit       每次初始化一个队列时触发
onQueueComplete   当队列中的所有文件上传完成时触发
onSelect   当文件从浏览框被添加到队列中时触发
onSelectError   选择文件出错时触发
onSWFReady   flash准备好时触发
onUploadComplete当一个文件上传完成时触发
onUploadError   当文件上传完成但是返回错误时触发
onUploadProgress上传汇总
onUploadStart   一个文件上传之间触发
onUploadSuccess   每个上传完成并成功的文件都会触发本事件

Methods 方法
cancel       取消一个上传队列
destroy       取消所有上传队列
disable       禁止点击“浏览按钮”
settings   返回或修改一个 uploadify实例的settings值
stop       停止当前的上传并重新添加到队列中去
upload       上传指定的文件或者所有队列中的文件　