JQuery上传插件Uploadify

简介

Uploadify简单说来，是基于Jquery的一款文件上传插件。它的功能特色总结如下：

1. 支持单文件或多文件上传，可控制并发上传的文件数
2. 在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……
3. 通过参数可配置上传文件类型及大小限制
4. 通过参数可配置是否选择文件后自动上传
5. 易于扩展，可控制每一步骤的回调函数（onSelect, onCancel……）
6. 通过接口参数和CSS控制外观
7. 更多……

相关链接

Uploadify主页地址：http://www.uploadify.com/?在该页面你可以了解到关于他的更多内容。

Uploadify在线演示：在线Demo

Uploadify配置参数及接口文档：http://www.uploadify.com/documentation

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

使用方法

1. 下载插件安装包后，可以看到里面的几个主要文件：jquery.uploadify.js（完成上传功能的脚本文件，在调用页面引用）、uploadify.css（外观样式表）、uploader.swf（上传控件的主体文件，flash控件）、upload.php（服务器端处理文件，官方仅提供了php版的）
2. 引用了插件文件后，在页面中做如下调用：

   fileExt ：?设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。?sizeLimit ：?上传文件的大小限制 。?simUploadLimit ：?允许同时上传的个数 默认值：1 。?buttonText ：?浏览按钮的文本，默认值：BROWSE 。?buttonImg ：?浏览按钮的图片的路径 。?hideButton ：?设置为true则隐藏浏览按钮的图片 。?rollover ：?值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。?width ：?设置浏览按钮的宽度 ，默认值：110。?height ：?设置浏览按钮的高度 ，默认值：30。?wmode ：?设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。?cancelImg?：选择文件到文件队列中后的每一个文件上的关闭按钮图标，如下图：

   

   上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

   onInit :?做一些初始化的工作。

   onSelect ：选择文件时触发，该函数有三个参数

   • event:事件对象。
   • queueID：文件的唯一标识，由6为随机字符组成。
   • fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。

     代码如下：

     + queueId + "\r\n" + "文件名：" + fileObj.name + "\r\n" + "文件大小：" + fileObj.size + "\r\n" + "创建时间：" + fileObj.creationDate + "\r\n" + "最后修改时间：" + fileObj.modificationDate + "\r\n" + "文件类型：" + fileObj.type ); } });});

     当选择一个文件后弹出的消息如下图：

     

     onSelectOnce?：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：

     • fileCount：选择文件的总数。
     • filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
     • filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
     • allBytesTotal：所有选择的文件的总大小。

       onCancel :?当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect?中的三个参数，data对象有两个属性fileCount和allBytesTotal。

       • fileCount：取消一个文件后，文件队列中剩余文件的个数。
       • allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。

         onClearQueue?：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel?中的两个对应参数。

         onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。

         onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。

         • type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
         • info：错误的描述

           onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。

           onProgress?：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：

           • percentage：当前完成的百分比
           • bytesLoaded：当前上传的大小
           • allBytesLoaded：文件队列中已经上传完的大小
           • speed：上传速率 kb/s

             onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed

             • fileCount：剩余没有上传完成的文件的个数。
             • speed：文件上传的平均速率 kb/s

               onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：

               • filesUploaded :上传的所有文件个数。
               • errors ：出现错误的个数。
               • allBytesLoaded ：所有上传文件的总大小。
               • speed ：平均上传速率 kb/s

                 相关函数介绍

                 在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：

                 uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码

                 $('#uploadify').uploadifySettings('folder','JS');

                 如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中

                 <a href="javascript:$('#uploadify').uploadifySettings('folder','JS');

                 $('#uploadify').uploadifyUpload()">上传</a>

                 uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。

                 $('#uploadify').uploadifyCancel(id);