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文件”,打开文件选择。

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 :选择文件到文件队列中后的每一个文件上的关闭按钮图标,如下图:

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.

时间: 2024-10-09 19:47:05

JQuery上传插件Uploadify API详解的相关文章

jQuery上传插件Uploadify使用详解(转发原作者冯威)

jQuery上传插件Uploadify使用详解 本文Uploadify版本为2.1.0,已经过时,截止(2016-09-25)最新版本3.2.1的详细介绍请移步<jQuery上传插件Uploadify使用详解(3.2.1)> Uploadify是jQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的

JQuery上传插件Uploadify使用详解及错误处理

转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错误,而我根据这些错误去网上找解决方案,却没有相关资料,所以为了不让更多的朋友走弯路,我把我遇到的一些问题进行汇总,也方便我自己以后查阅. 什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示. 官网提供的是PHP的DEMO,在这里我

jQuery上传插件Uploadify使用详解(3.2.1)(转载)

jQuery上传插件Uploadify使用详解(3.2.1) Sep 25, 2016 | JQuery | 10733 Hits 六年前,因为工作中使用到 jQuery 的上传组件 Uploadify ,写了一篇<JQuery上传插件Uploadify使用详解>的博客来介绍 Uploadify ,其实只是将官方文档简单翻译了下.几年下来居然有50多万的访问量,而且每天通过各种搜索引擎有大几百的朋友会访问到这篇文章.六年时间 Uploadify 从当时的2.1.0到了现在的3.2.1,变化还是

JQuery上传插件Uploadify使用详解(转)

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFil

JQuery上传插件Uploadify使用详解

目录[-] Options选项设置 Events事件 Methods方法 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <html xmlns="http://www.w3.org/1999/xhtml"> <he

jquery上传插件uploadify 报错http error 302 解决方法之一

前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改,问题并没有解决. 因此,不排除这是解决302错误的解决方法之一,但是我接下来提出另一解决方案,考虑到异步传输的问题,供大家参考(反正我是成功了). 首先是uploadify初始化: $(function() {           $('#projectfile').uploadify({    

jQuery上传插件Uploadify出现Http Error 302错误解决

前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首 先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行 post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然 就不能获取到session,

jquery 上传插件 uploadify

官网:http://www.uploadify.com/社区:http://www.uploadify.com/forum/ 基于jQuery的文件上传插件,有flash(Uploadify)和html5(UploadFive)两个版本 特点说明:-----------------1.支持多文件上传2.支持拖放上传(html5版本)3.上传进度显示4.可自定义上传限制,包括文件大小.文件数量.文件类型5.高度可定制性 关于下载-------------------Uploadify™:基于fla

jQuery上传插件Uploadify使用帮助

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……) 通过接口参数和CSS控制外观 使用帮助: 官网地址:http://www.uploadify.com/ 官方参数配置文档