zoukankan      html  css  js  c++  java

  • JQuery上传插件Uploadify使用详解

    Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。

    首先按下面的步骤来实现一个简单的上传功能。

    1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。

    2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。

    3 在项目中添加UploadFile文件夹，用来存放上传的文件。

    进行完上面三步后项目的基本结构如下图:

    2010-01-05_094439

    4 Default.aspx的html页的代码修改如下：

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Uploadify</title>
    <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
     rel="stylesheet" type="text/css" />
    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
     rel="stylesheet" type="text/css" />

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

    <script type="text/javascript"
   src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#uploadify").uploadify({
                'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
                'script': 'UploadHandler.ashx',
                'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': false,
                'multi': true
            });
        });  
    </script>

</head>
<body>
    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
      <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
      <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
    </p>
</body>
</html>

    5  UploadHandler类的ProcessRequest方法代码如下：

    public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";   
    context.Response.Charset = "utf-8";   

    HttpPostedFile file = context.Request.Files["Filedata"];   
    string  uploadPath = 
        HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";  

    if (file != null)  
    {  
       if (!Directory.Exists(uploadPath))  
       {  
           Directory.CreateDirectory(uploadPath);  
       }   
       file.SaveAs(uploadPath + file.FileName);  
        //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
       context.Response.Write("1");  
    }   
    else  
    {   
        context.Response.Write("0");   
    }  
}

    6 运行后效果如下图：

    2010-01-05_095617

    7 选择了两个文件后，点击上传，就可以看到UploadFile文件夹中会增加这两个文件。

    上面简单地实现了一个上传的功能，依靠函数uploadify实现，uploadify函数的参数为json格式，可以对json对象的key值的 修改来进行自定义的设置，如multi设置为true或false来控制是否可以进行多文件上传，下面就来介绍下这些key值的意思：

     

      1. ·参数  
      2. uploader  
      3.   设置uploadify.swf文件的相对或绝对路径。默认值：'uploadify.swf'  
      4.   
      5. script  
      6.   设置用于处理文件上传的后台程序页面的相对或绝对路径。默认值：'upload.php'  
      7.   
      8. checkScript  
      9.   设置用于检查规则的后台程序页面的相对或绝对路径。  
      10.   
      11. scriptData  
      12.   一个键值对应的数据，它将连同文件一起传给后台程序页面。示例：{'name':'value'}  
      13.   
      14. fileDataName  
      15.   设置上传控件的名称。默认值：'Filedata'  
      16.   
      17. method  
      18.   设置scriptData提交的方式。可选值：GET,POST  默认值：'POST'  
      19.   
      20. scriptAccess  
      21.   设置Flash的访问模式。如果是本地测试，可设置为'always'。默认值：'sameDomain'  
      22.   
      23. folder  
      24.   设置文件保存的目录。不能以'/'结束。  
      25.   
      26. queneID  
      27.   设置文件队列里的元素的ID，默认情况下，在点击浏览按钮后 自动创建。  
      28.   
      29. queueSizeLimit  
      30.   设置文件队列的最大值。默认值：999  
      31.   
      32. multi  
      33.   设置为true表示允许上传多个文件。  
      34.   
      35. auto  
      36.   设置为true表示当选择一件附件后，自动开始上传。  
      37.   
      38. fileDesc  
      39.   设置文件浏览对话框中的文件类型下拉框的显示文本。  
      40.   
      41. fileExt  
      42.   设置允许上传的文件类型，如：'*.ext1;*. ext2;*.ext3'。如果设置此选项，则必须设置fileDesc。  
      43.   
      44. sizeLimit  
      45.   设置允许的单文件大小。单位：字节  
      46.   
      47. simUploadLimit  
      48.   设置同时上传文件的数量。默认值：1  
      49.   
      50. buttonText  
      51.   设置上传按钮的文本。默认值：'BROWSE'  
      52.   
      53. buttonImg  
      54.   设置浏览按钮的图片。  
      55.   
      56. hideButton  
      57.   设置为true则隐藏按钮图片。  
      58.   
      59. rollover  
      60.   Set to true if you would like to activate rollover states for your browse button. To prepare your browse button for rollover states, simple add the ‘over’ and ‘press’ states below the normal state in a single file.  
      61.   
      62. width  
      63.   设置按钮图片和flash文件的宽度。默认值：30  
      64.   
      65. height  
      66.   设置按钮图片或flash文件的高度。如果rollover为true，则是实际大小的1/3。默认值：110  
      67.   
      68. wmode  
      69.   设置为transparent则flash的背景将变成透明，并且在页面所有元素的最顶层。默认值：'opaque'  
      70.   
      71. cancelImg  
      72.   设置取消按钮的图片路径。默认值：cancel.png  
      73.   
      74. onInit  
      75.   当插件加载时触发此事件，默认会将页面上的目标元素转换成flash文件并添加容器，如果返回false则不会执行此动作。  
      76.   
      77. onSelect  
      78.   当选中一个文件后触发此事件，默认会创建一个6位的随机编号的元素，并加入到文件队列中，如果返回false则不会执行此动作。  
      79.   此事件有三个参数：  
      80.   event: javascript的event对象  
      81.   queueID: 选中文件的编号  
      82.   fileObj: 一个包含文件详细信息的对象。  
      83.     name – 文件名称  
      84.     size – 文件的大小（字节）  
      85.     creationDate – 文件的创建时间  
      86.     modificationDate – 文件的修改时间  
      87.     type – 文件的扩展名（包括'.'）  
      88.   
      89. onSelectOnce  
      90.   当执行选中操作时触发此事件，该事件没有默认的处理程序。  
      91.   此事件有两个参数：  
      92.   event: javascript的event对象  
      93.   data: 一个包含选择操作详细信息的对象。  
      94.     fileCount – 队列中的文件总数  
      95.     filesSelected – 在选择操作中选中的文件数  
      96.     filesReplaced – 在队列中被替换的文件数  
      97.     allBytesTotal – 队列中所有文件的大小（字节）  
      98.   
      99. onCancel  
      100.   当一个文件上传被取消或在队列中被删除时触发此事件。默认事件将会将此文件的名称从队列中移除，如果返回false则不执行此动作。  
      101.   此事件有四个参数：  
      102.   event: javascript的event对象。  
      103.   queueID: 被取消（移除）的文件的编号  
      104.   fileObj: 被取消（移除）的文件的详细信息。（见onSelect）  
      105.   data: 文件队列的详细信息。  
      106.     fileCount – 在文件队列中剩余的文件的数量  
      107.     allBytesTotal – 在文件队列中剩余的文件的大小（字节）  
      108.   
      109. onClearQueue  
      110.   当调用fileUploadClearQueue函数时触发此事件。默认事件会移除文件队列中的所有元素，如果返回false则不执行此动作。  
      111.   此事件有两个参数：  
      112.   event: javascript的event对象。  
      113.   data: 被调用此事件的文件队列的详细信息。  
      114.     fileCount – 上传队列的文件数  
      115.     allBytesTotal – 上传队列的兽性大小（字节）  
      116.   
      117. onQueueFull  
      118.   当队列达到设定的最大值后触发此事件，默认事件会提示用户队列数量。  
      119.   此事件有两个参数：  
      120.   event: javascript的event对象。  
      121.   queueSizeLimit: 队列最大值。  
      122.   
      123. onError  
      124.   当上传文件发生异常时触发此事件，默认事件会将元素变成红色并提示相应的错误信息。  
      125.   此事件有四个参数：  
      126.   event: javascript的event对象。  
      127.   queueID: 发生错误的元素的唯一编号。  
      128.   fileObj: 发生错误的元素的文件详细信息。（见onSelect）  
      129.   errorObj: 发生错误时的错误详细信息。  
      130.     type – 分别是：'HTTP', 'IO', 'Security'三者之一   
      131.     info – 错误信息描述  
      132.   
      133. onOpen  
      134.   当选择一个文件后，Flash文件初始化此文件时触发此事件。没有默认事件。  
      135.   此事件有三个参数：  
      136.   event: javascript的event对象。  
      137.   queueID: 文件的元素的唯一编号。  
      138.   fileObj: 文件的详细信息。  
      139.   
      140. onProgress  
      141.   当上传文件时，进度发生改变时触发此事件。默认事件会更新文件队列中的进度条。如果返回false则不执行此动作。  
      142.   此事件有四个参数：  
      143.   event: javascript的event对象。  
      144.   queueID: 文件的元素的唯一编号。  
      145.   fileObj: 文件的详细信息。  
      146.   data: 一个关于文件与队列的详细信息的对象。  
      147.     percentage – 当前文件上传完成的百分比。  
      148.     bytesLoaded – 当前文件已上传的字节数  
      149.     allBytesLoaded – 文件的总字节数  
      150.     speed – 当前上传的速度（KB）  
      151.   
      152. onComplete  
      153.   当文件上传完成后触发此事件，默认事件会更新文件队列的相关状态。如果返回false则不执行此动作。  
      154.   此事件有五个参数：  
      155.   event: javascript的event对象。  
      156.   queueID: 文件的元素的唯一编号。  
      157.   fileObj: 文件的详细信息。  
      158.   response: 从服务器发回的数据。  
      159.   data: 文件队列的详细信息。  
      160.     fileCount – 文件队列的文件总数  
      161.     speed – 文件上传的平均速度（KB）  
      162.   
      163. onAllComplete  
      164.   当所有文件上传完毕后触发此事件。没有默认事件。  
      165.   此事件有两个参数：  
      166.   event: javascript的event对象。  
      167.   data: 上传过程的详细信息  
      168.     filesUploaded – 此次上传的文件数量  
      169.     errors – 上传过程的错误次数  
      170.     allBytesLoaded – 此次上传的文件总大小（字节）  
      171.     speed – 此次上传的平均速度（KB）  
      172.   
      173. onCheck  
      174.   当检查到服务器已存在此文件时触发此事件，默认事件是弹出确认框。  
      175.   此事件有五个参数：  
      176.   event: javascript的event对象。  
      177.   checkScript: 检查文件的后台程序页面。  
      178.   fileQueue: 一个队列（{'唯一编号','文件名称'}的对象。  
      179.   folder: 上传的路径。  
      180.   single: 如果为true表示只有一个文件正准备上传至服务器。  
      181.   
      182. ·方法  
      183. uploadifySettings(setting, value)  
      184.   用于获取或设置插件的参数。  
      185.   获取：#(’#someID’).uploadifySettings(’queueSize’);  
      186.   设置：$(’#someID’).uploadifySettings(’folder’,'/uploads’);  
      187.   
      188. uploadifyUpload([queueID])  
      189.   用于开始上传一个或所有文件。  
      190.   示例：$(’#someID’).uploadifyUpload();  
      191.   
      192. uploadifyCancel(queueId)  
      193.   用于停止上传或队列中取消一个文件。  
      194.   示例：$(’#someID’).uploadifyCancel(’NFJSHS’);  
      195.   
      196. uploadifyClearQueue()  
      197.   用于清除当前文件队列中的所有文件。  
      198.   示例：$(’#someID’).uploadifyClearQueue(); 
  • 相关阅读:
    前端面试集锦
    nodeJs上传附件
    逻辑于 逻辑或
    webpack 学习笔记 （一）
    yum 安装mongodb mysql
    闭包面试提 （2）
    主动的重要性
    1.1一天一题：逆转字符串
    编程提高：一天一道编程题
    iconv将文件编码从gb2312 转换为utf-8
  • 原文地址：https://www.cnblogs.com/webu/p/2791197.html
Copyright © 2011-2022 走看看