zoukankan      html  css  js  c++  java

  • 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这样的参数项，是没有用的，反而会把自己弄糊涂
  • 相关阅读:
    第十四章 构建自定义的同步工具（待续）
    第十三章 显示锁（待续）
    第十二章 并发程序的测试（待续）
    第十一章 性能与可伸缩性（待续）
    第十章 避免活跃性危险（待续）
    第九章 图形用户界面的并行化（待续）
    第八章 线程池的使用（待续）
    第七章 取消与关闭（待续）
    NOIp 2015真题模拟赛 By cellur925
    [USACO10MAR]伟大的奶牛聚集Great Cow Gat…【树形dp】By cellur925
  • 原文地址：https://www.cnblogs.com/zxtceq/p/7356060.html
Copyright © 2011-2022 走看看