JQuery上传插件Uploadify API详解

一、相关key值介绍
uploader:uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。
script:后台处理程序的相对路径 。默认值:uploadify.php
scriptData:上传到后台的参数,参数为json格式。
checkScript:用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName:设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method:提交方式Post或Get,默认为Post
scriptAccess:flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain
folder:上传文件存放的目录 。
queueID:文件队列的ID,该ID与存放文件队列的div的ID一致。
queueSizeLimit:当允许多文件生成时,设置选择文件的个数,默认值:999。
multi:设置为true时可以上传多个文件。
auto:设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。
fileDesc:这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择。
JQuery上传插件Uploadify API详解
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 :选择文件到文件队列中后的每一个文件上的关闭按钮图标,如下图:
JQuery上传插件Uploadify API详解

onInit: 做一些初始化的工作。
onSelect:选择文件时触发,该函数有三个参数,参数如下:
    event:事件对象。
    queueID:文件的唯一标识,由6位随机字符组成。
    fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type5个属性。
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为后台处理程序返回的值,data有两个属性fileCount和speed:
   fileCount:剩余没有上传完成的文件的个数。
   speed:文件上传的平均速率 kb/s
注:fileObj对象和上面讲到的有些不太一样,onComplete的fileObj对象有个filePath属性可以取出上传文件的路径。
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);

 

 

 

以下是可选项的参数说明:(红色的属性代表常用的)

 

 

 

1

uploader

上传控件的主体文件,flash控件

   默认值=‘uploadify.swf‘

2

script

 

相对路径的后端脚本,它将处理您上传的文件。

绝对路径前缀或‘/‘或‘http‘的路径

  默认值=‘uploadify.php‘

3

checkScript

 

检查该文件是否已经选择驻留在服务器上。
没有默认值。 官方例子中‘check.php‘是提供核心文件

4

scriptData

 

可提供URL传递参数。用来传递get参数。例如:

  index.jsp?id=1&action=uploadify可以设置成:

‘script‘: ‘index.jsp‘,

‘scriptData‘:{‘id‘:1,‘action‘:‘uploadify‘},

注:要设置‘method’:‘GET’.

 

5

fileDataName

 

 您的文件在上传服务器脚本阵列的名称。
   默认值=‘Filedata‘

6

method

 

 设置为发送到后端脚本的方法。要么‘get‘或post‘。

   默认值‘post‘

7

scriptAccess

 

 ?

8

folder

 

您想将文件保存到的路径。考虑到安全问题,一般并不在客户端设定后供服务器得到所存的路径。我试了下。这个参数好像以get的方式传递的。设定post得不到这个值。

9

queueID

 

 文件队列ID。与div的id一致。参考上一篇例子的用法。

10

queueSizeLimit

 

限制在一次队列中的次数(可选定几个文件)。默认值= 999,而一次可传几个文件有 simUploadLimit属性决定

11

multi

 

是否允许同时上传多文件,可设定true或false。

  默认false。设定true时,选中的文件是当前项。

12

auto

 

选定文件后是否自动上传,可设定true或false。

  默认false

13

fileDesc

 

出现在上传对话框中的文件类型描述。与fileExt需同时使用

14

fileExt

 

支持的格式,启用本项时需同时声明fileDesc。

如:‘*.rar,*.doc

 

15

sizeLimit

 

控制上传文件的大小,单位byte

16

simUploadLimit

 

多文件上传时,同时上传文件数目限制。默认1

  一次可传几个文件。

17

buttonText

 

默认按钮的名字。默认BROWER

18

buttonImg

 

使用图片按钮,设定图片的路径即可。

19

hideButton

 

上传按钮的隐藏。true 或false。默认flase

20

rollover

 

 

21

width

 

 按钮图片的长度。默认 110

22

height

 

 按钮图片的高度。默认 30

23

wmode

 

 背景透明transparent 与不透明opaque设定。默认 不透明

 

24

cancelImg

 

 取消按钮。设定图片路径。默认cancel.png

 

 

25

onInit

 

函数, 初始化时的状态。

onInit: function() { 

$("#id").html("上传前");},

26

onComplete

 

函数:可传递五个参数

event: 事件对象

queueID: 完成文件的唯一标识符。

fileObj:  

  • name – 文件名

  • filepath –上传路径

  • size – 文件大小

  • creationDate – 文件创建时间

  • modificationDate文件最近修改时间

  • type –文件的扩展名

response: 服务器回调的数据

data:  

  • fileCount – The total number of files left in the queue

  • speed – 平均上传速度 KB/s

如:

onComplete: function(event, queueID, fileObj) {

  alert("文件:" +fileObj.name + "上传失败");  }

 

27

onSelectOnce

 

函数:可传递二个参数

event: The event object.

data: An object containing details about the select operation.

  • fileCount – The total number of files in the queue

  • filesSelected – The number of files selected in the select operation

  • filesReplaced – The number of files that were replaced in the queue

  • allBytesTotal – The total number of bytes for all files in the queue

 

28

onCancel

 

函数:可传递四个参数

event: The event object.

queueID: The unique identifier of the file that was cancelled.

fileObj: An object containing details about the file that was selected.

   • name – The name of the file

   • size – The size in bytes of the file

   • creationDate – The date the file was created

   • modificationDate – The last date the file was modified

   • type – The file extension beginning with a ‘.‘

 

data: Details about the file queue.

   • fileCount – The total number of files left in the queue

   • allBytesTotal – The total number of bytes left for all files in the queue

 

29

onClearQueue

 

函数:可传递一个参数

event: The event object.

30

onQueueFull

 

函数:可传递二个参数

event - The event object.

queueSizeLimit - The maximum size of the queue.

 

31

onError

 

函数:可传递四个参数

 

event: The event object.

queueID: The unique identifier of the file that was errored.

fileObj: An object containing details about the file that was selected.

  • name – The name of the file

  • size – The size in bytes of the file

  • creationDate – The date the file was created

  • modificationDate – The last date the file was modified

  • type – The file extension beginning with a ‘.‘

errorObj: An object containing details about the error returned.

  • type – Either ‘HTTP‘, ‘IO‘, or ‘Security‘

  • info – An error message describing the type of error returned

 

32

onOpen

 

函数:可传递三个参数

event: The event object.

queueID: The unique identifier of the file that was opened.

fileObj: An object containing details about the file that was selected.

  • name – The name of the file

  • size – The size in bytes of the file

  • creationDate – The date the file was created

  • modificationDate – The last date the file was modified

  • type – The file extension beginning with a ‘.‘

 

33

onProgress

 

 

函数:可传递四个参数

event: The event object.

queueID: The unique identifier of the file that was updated.

fileObj: An object containing details about the file that was selected.

  • name – The name of the file

  • size – The size in bytes of the file

  • creationDate – The date the file was created

  • modificationDate – The last date the file was modified

  • type – The file extension beginning with a ‘.‘

 

data: An object containing details about the upload and queue.

  • percentage – The current percentage completed for the upload

  • bytesLoaded – The current amount of bytes uploaded

  • allBytesLoaded – The current amount of bytes loaded for all files in the queue

  • speed – The current upload speed in KB/s

 

34

onSelect

 

 

event: The event object.

queueID: The unique identifier of the file that was selected.

fileObj: An object containing details about the file that was selected.

  • name – The name of the file

  • size – The size in bytes of the file

  • creationDate – The date the file was created

  • modificationDate – The last date the file was modified

  • type – The file extension beginning with a ‘.‘

 

35

onAllComplete

 

 

函数:可传递二个参数

 

event: The event object.

data: An object containing details about the upload process.

  • filesUploaded – The total number of files uploaded

  • errors – The total number of errors while uploading

  • allbytesLoaded – The total number of bytes uploaded

  • speed – The average speed of all uploaded files

 

36

onCheck

 

函数:可传递五个参数

 

event: The event object.

checkScript: The path to the file checking script.

fileQueue: A file queue object consisting of  key/value pairs with the queue ID as the key and the filename as the value.

folder: The path to the upload folder.

single: True if only one file is being uploaded from the queue.

 

JQuery上传插件Uploadify API详解

上一篇:C#几个经常用到的字符串截取


下一篇:最常见的 20 个 jQuery 面试问题及答案