Document

uploadify3.2.1版插件在ASP.NET中的使用

0.先去官网下载插件 下载uploadify3.2.1插件

解压后只需要一下文件：

                                    （1） jQuery.uploadify.min.js

                                    （2） uploadify.css

                                    （3） uploadify.swf

但是运用到网站后需要应用jquery 1.4以上版本

1.ASP.NET Web Form

简单配置.ASPX文件

 

[html] view plain copy
 
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  4.     <title></title>  
  5.     <link type="text/css" rel="stylesheet" href="Content/uploadify/uploadify.css" />  
  6.     <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>  
  7.     <script type="text/javascript" src="Content/uploadify/jquery.uploadify.min.js"></script>  
  8. </head>  
  9. <body>  
  10.     <input id="file_upload" name="file_upload" type="file" multiple="multiple"/>  
  11.     <script type="text/javascript">  
  12.         $(document).ready(function () {  
  13.             $("#file_upload").uploadify({  
  14.                 'swf': 'Content/uploadify/uploadify.swf',  
  15.                 'auto': true,  
  16.                 'multi': true,  
  17.                 'uploader': 'UploadHandler.ashx',//指定一般处理程序 执行上传后的文件处理  
  18.             });  
  19.         });  
  20.     </script>  
  21. </body>  
  22. </html>  

 

创建一般处理程序 重新 ProcessRequest

 

[csharp] view plain copy
 
  1. public void ProcessRequest(HttpContext context)  
  2. {  
  3.     context.Response.ContentType = "text/plain";  
  4.     context.Response.Charset="UTF-8";  
  5.     HttpPostedFile file=context.Request.Files["Filedata"];   
  6.     //这个Filedata 是uploadify fileObjName项的默认值  
  7.     string path = HttpContext.Current.Server.MapPath("~/LoadFiles") + "\\";  
  8.     if (file != null)  
  9.     {  
  10.         file.SaveAs(path+file.FileName);  
  11.     }  
  12. }  

2.ASP.NET MVC3

 

配置View

 

[html] view plain copy
 
  1.  <link type="text/css" rel="stylesheet" href=@Url.Content("~/Content/uploadify/uploadify.css") />  
  2. <script type="text/javascript" src=@Url.Content("~/Scripts/jquery-1.7.1.min.js")></script>  
  3. //我试了很多次，一定要引用Url.Content辅助方法才行  
  4. <script type="text/javascript" src=@Url.Content("~/Content/uploadify/jquery.uploadify.min.js")></script>  
  5. <script type="text/javascript">  
  6.     $(function () {  
  7.         $("#file_upload").uploadify({  
  8.             'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")',  
  9.             'auto': true,  
  10.             'multi': true,  
  11.             'uploader': 'Person/Upload'  
  12.         });  
  13.     });  
  14. </script>  
  15. <input id="file_upload" name="file_upload" type="file" multiple="multiple"/>  

 

编写Action 只要捕获到Filedata接算是成功了

 

[csharp] view plain copy
 
  1.   [HttpPost]  
  2.   public ActionResult Upload(HttpPostedFileBase Filedata)  
  3.   //Filedata不能改名 因为它是uploadify fileObjName项的默认值 除非修改 fileObjName项的默认值  
  4.   //不然会报错  
  5.  {  
  6.       if (Filedata != null)  
  7.       {  
  8.           //do something.  
  9.       }  
  10.       return View();  
  11.   }  

 

3.ASP.net MVC4

配置View

 

[html] view plain copy
 
  1. <link type="text/css" rel="stylesheet" href=@Url.Content("~/Content/uploadify/uploadify.css") />  
  2. <script type="text/javascript" src=@Url.Content("~/Scripts/jquery-1.7.1.min.js")></script>  
  3. <script type="text/javascript" src=@Url.Content("~/Content/uploadify/jquery.uploadify.min.js")></script>  
  4. <script type="text/javascript">  
  5.     $(function () {  
  6.         $("#file_upload").uploadify({  
  7.             'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")',  
  8.             'auto': true,  
  9.             'multi': true,  
  10.             <span style="color:#FF0000">'uploader': '@Url.Action("Upload","Person")',</span>  
  11.             'folder': 'UpLoadFiles'  
  12.         });  
  13.     });  
  14. </script>  
  15. <input id="file_upload" name="file_upload" type="file" multiple="multiple"/>  
[html] view plain copy
 
  1. <span style="font-size:18px; color:#3366FF">：其实和MVC3差不多，只是有一个地方不明白，在MVC4中</span><span style="color:#3366FF">   
  2.    'uploader': '@Url.Action("Upload","Person")' 写成  
  3. </span><pre name="code" class="html"><span style="color:#3366FF">   'uploader': 'Person/Upload' 会报错。。。。  
  4. </span></pre>  

 

 

编写Action 和MVC3 一样

 

[csharp] view plain copy
 
  1. [HttpPost]  
  2.         public ActionResult Upload(HttpPostedFileBase Filedata)  
  3.         {  
  4.             if (Filedata != null)  
  5.             {  
  6.                 //do something  
  7.             }  
  8.             return View();  
  9.         }  

 

 

以上只是uploadify插件的简单运用，其还有更多的功能需要慢慢学习

 

uploadify 3.2.1 参数项:

 

[javascript] view plain copy
 
  1. <span style="font-size:14px">// Required Settings  
  2.                     id       : $this.attr('id'), // The ID of the DOM object  
  3.                     swf      : 'uploadify.swf',  // The path to the uploadify SWF file  
  4.                     uploader : 'uploadify.php',  // The path to the server-side upload script  
  5.                       
  6.                     // Options  
  7.                     auto            : true,               // Automatically upload files when added to the queue  
  8.                     buttonClass     : '',                 // A class name to add to the browse button DOM object  
  9.                     buttonCursor    : 'hand',             // The cursor to use with the browse button  
  10.                     buttonImage     : null,               // (String or null) The path to an image to use for the Flash browse button if not using CSS to style the button  
  11.                     buttonText      : 'SELECT FILES',     // The text to use for the browse button  
  12.                     checkExisting   : false,              // The path to a server-side script that checks for existing files on the server  
  13.                     debug           : false,              // Turn on swfUpload debugging mode  
  14.                     fileObjName     : 'Filedata',         // The name of the file object to use in your server-side script  
  15.                     fileSizeLimit   : 0,                  // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)  
  16.                     fileTypeDesc    : 'All Files',        // The description for file types in the browse dialog  
  17.                     fileTypeExts    : '*.*',              // Allowed extensions in the browse dialog (server-side validation should also be used)  
  18.                     height          : 30,                 // The height of the browse button  
  19.                     itemTemplate    : false,              // The template for the file item in the queue  
  20.                     method          : 'post',             // The method to use when sending files to the server-side upload script  
  21.                     multi           : true,               // Allow multiple file selection in the browse dialog  
  22.                     formData        : {},                 // An object with additional data to send to the server-side upload script with every file upload  
  23.                     preventCaching  : true,               // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)  
  24.                     progressData    : 'percentage',       // ('percentage' or 'speed') Data to show in the queue item during a file upload  
  25.                     queueID         : false,              // The ID of the DOM object to use as a file queue (without the #)  
  26.                     queueSizeLimit  : 999,                // The maximum number of files that can be in the queue at one time  
  27.                     removeCompleted : true,               // Remove queue items from the queue when they are done uploading  
  28.                     removeTimeout   : 3,                  // The delay in seconds before removing a queue item if removeCompleted is set to true  
  29.                     requeueErrors   : false,              // Keep errored files in the queue and keep trying to upload them  
  30.                     successTimeout  : 30,                 // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading  
  31.                     uploadLimit     : 0,                  // The maximum number of files you can upload  
  32.                     width           : 120,                // The width of the browse button</span>  

：在3.2.1版本中和以前不一样不要乱用像script、cancelImg这样的参数项，是没有用的，反而会把自己弄糊涂

posted @ 2017-08-14 09:23  从未被超越  阅读(465)  评论(0)  编辑  收藏  举报