主要介绍SWFUpload的用户指南,这是一个结合了flash和js的文件上传插件,功能非常强大。有需要的朋友可以参考一下
SWFUpload是flash和js结合的文件上传插件,功能非常强大。之前在项目中用过几次,但是配置参数太多,用了之后就忘了怎么用了。以后想用的时候还得看官网的文档,真的很烦。所以简单的记下它的用法,也方便英语笨拙的同学查看,一劳永逸的利人利己。(PS: SWFUpload很久没更新了,官网打不开。建议您使用PLOAD而不是SWFUPLOAD。PLOAD主要使用html5上传方式,在不支持html5的浏览器中会自动回复到flash的上传方式。它的功能永远是灰色的,功能强大!使用方法见my 《前端上传组件Plupload使用指南》)
SWFUpload的特点:
1.用flash上传,页面不刷新,可以自定义Flash按钮的样式;
2.您可以限制在浏览器端上传的文件;
3.允许一次上传多个文件,但是会有一个上传队列,队列中的文件是一个一个上传的。服务器接收文件时,和普通表单上传文件一样;
4.提供丰富的事件接口供开发者使用;
SWFUpload的文件上传过程如下:
1.引入相应的js文件。
2.实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置。
3.点击SWFUpload提供的Flash按钮,会弹出文件选择窗口,选择要上传的文件;
4.文件选择完成后,将符合条件的文件添加到上传队列中;
5.调用startUpload方法开始上传队列中的文件;
6.文件上传过程中会触发相应的事件。开发者用这些事件来更新ui、处理错误、发出提示等等;
SWFUpload包括三个部分:SWFUpload.js、swfupload.swf、初始化配置参数和各种事件处理函数。所以先把SWFUpload.js引入页面。
script src= swf upload . js /script
然后实例化一个SWFUpload对象:
var swfu
window.onload=function () {
var _ object={//定义参数配置对象
upload _ URL: http://www . swf upload . org/upload . PHP ,
flash _ URL: http://www . swf upload . org/swf upload . swf ,
文件发布名称:文件数据,
post_params : {
后置参数名称1 :后置参数值1 ,
post _ param _ name _ 2 : post _ param _ value _ 2 ,
后置参数名称:后置参数值
},
use_query_string : false,
reque _ on _ error:false,
http_success : [201,202],
假设_成功_超时:0,
文件类型:“*”。jpg*.gif ,
file _ types _ description:“Web图像文件”,
文件大小限制: 1024 ,
文件_上传_限制:10,
文件队列限制:2,
调试:假,
prevent _ swf _ cache:false,
preserve_relative_urls : false
button _ placeholder _ id: element _ id ,
button _ image _ URL: http://www . swf upload . org/button _ sprite . png ,
button_width : 61
button_height : 22,
button _ text: b单击/b 此处/span ,
button_text_style:“”。red text { color:# ff 0000;},
button_text_left_padding : 3,
button_text_top_padding : 2,
button_action : SWFUpload。按钮_动作。选择文件,
button_disabled : false
button_cursor : SWFUpload。光标。手,
button_window_mode : SWFUpload。窗口模式。透明的,
swf upload _ loaded _ handler:swf upload _ loaded _ function,
文件_对话框_启动_处理程序:文件_对话框_启动_功能,
文件排队处理程序:文件排队函数,
文件队列错误处理程序:文件队列错误函数,
文件_对话框_完成_处理程序:文件_对话框_完成_功能,
上传_开始_处理程序:上传_开始_功能,
上传_进度_处理程序:上传_进度_功能,
上传错误处理程序:上传错误函数,
上传_成功_处理程序:上传_成功_功能,
上传_完成_处理程序:上传_完成_功能,
调试处理程序:调试功能,
};
swfu=new swf upload(settings _ object);//实例化一个SWFUpload,传入参数配置对象。
};
/*定义各种事件监听函数*/
函数swfupload_loaded_function(){}
函数file_dialog_start_function(){}
.等等
我们可以看到,实现一个swfupload上传功能非常简单,就是实例化一个swfupload对象。但是,繁琐的部分在于实例化要使用的参数配置对象,以及各种事件的定时和提供的参数。所以重点来了。下表列出了开发中要用到的东西。虽然数量不少,但也不全是swfupload。我列举的只是常用的。要查看完整文档,请访问swfupload官方网站。
一、配置参数对象的常用属性及描述
属性
类型
系统默认值
形容
上传_url
线
上传文件的服务器端页面的url地址可以是绝对地址,也可以是相对地址。当地址是相对地址时,它是当前代码所在的文档地址。
保留相对URL
布尔代数学体系的
错误的
如果为false,SWFUpload会将swfupload.swf使用的相对地址转换为绝对地址,以实现更好的兼容性。
文件发布名称
线
文件数据
相当于普通文件域上传文件时的name属性,服务器端接收页面以此名称获取上传的文件。
后置参数
对象(直接数量)
一个对象的直接数量,其中的键/值对将随每个文件一起上传,这在一些信息需要附加到文件上传时很有用。
使用查询字符串
布尔代数学体系的
错误的
为false时,post_params属性定义的参数将通过post上传;如果为true,它将由get上传(也就是说,参数将以查询字符串的形式附加到url上)
文件类型
线
此属性指定允许上载的文件类型。当有多个类型时,用分号分隔,如:*。jpg*.png,请使用*。*
文件类型描述
线
指定在文件选择窗口中显示的文件类型描述,作为提示和说明。
文件大小限制
线
指定要上传的文件的最大大小,可以用单位表示。法定单位为:B、KB、MB、GB。如果省略单位,则默认为KB。当该属性为0时,表示文件大小不受限制。
文件_上传_限制
数字
指定可以上传的最大文件数。当成功上传的文件数量达到此最大值时,将无法上传更多文件或向上传队列添加更多文件。将此属性设置为0意味着对上传的文件数量没有限制。
文件队列限制
数字
指定文件上载队列中可以同时存储的最大文件数。当超过此数量时,只有当队列中有成功上传、上传错误或取消的文件时,才能添加相同数量的其他文件。当file_upload_limit的值或可上传的剩余文件数小于file_queue_limit时,取较小的值。
flash_url
线
swfupload.swf文件的绝对或相对地址。相对地址是指相对于当前页面的地址。实例化swfupload后,不能更改该属性的值。
防止_ swf _缓存
布尔代数学体系的
如果为true,则会在swfupload.swf的地址后附加一个随机数,以防止flash电影被缓存。这是为了防止某些版本的IE浏览器读取缓存的falsh电影。
按钮_占位符_id
线
指定dom元素的id,它将在swfupload实例化后被Flash按钮替换。这个dom元素相当于一个占位符。
按钮_占位符
DOMElement
指定一个dom元素,该元素将在swfupload实例化后被Flash按钮替换。这个dom元素相当于一个占位符。当button_placeholder_id和button_placeholder都存在时,button_placeholder_id优先。
按钮_图像_url
线
指定Flash按钮的背景图片,相对地址或绝对地址。该地址受preserve_relative_urls属性的影响,并遵循与upload_url相同的规则。
背景图片必须是sprite图片,从上到下包括Flash按钮的四种状态:正常、鼠标悬停、按下和禁用。所以图片的高度应该是闪光灯按钮的四倍。
按钮宽度
数字
指定闪烁按钮的宽度。
按钮高度
数字
指定Flash按钮的高度,应该是button_image_url指定的按钮背景图片高度的1/4。
按钮_文本
线
指定Flash按钮上的文本,也可以是html代码。
按钮_文本_样式
线
Flash按钮上文本的样式。有关其用法,请参见示例。
按钮_文本_顶部_填充
数字
指定Flash按钮顶部的内边距,可以是负数。
按钮_文本_左填充
数字
指定Flash按钮左侧的内边距,可以是负数。
按钮_禁用
布尔代数学体系的
错误的
如果为真,闪烁按钮将被禁用,并且单击不会触发任何行为。
按钮_光标
指定当鼠标悬停在Flash按钮上时的光标样式。可用的值是在SWFUpload中定义的常量。光标
按钮窗口模式
指定Flash按钮的WMODE属性,可用的值是SWFUpload中定义的常量。窗口模式
文件对话框启动处理程序
功能
fileDialogStart事件监听函数
文件排队处理程序
功能
文件排队事件监听函数
文件队列错误处理程序
功能
FileQueueError事件监听函数
文件对话框完成处理程序
功能
文件对话完整的事件监听功能
上传开始处理程序
功能
上传开始事件监听功能
上传进度处理程序
功能
UploadProgress事件监听功能
上传错误处理程序
功能
上传错误事件监听功能
上传成功处理程序
功能
上传成功事件监听功能
上传完成处理程序
功能
上传完整的事件监听功能
二。各种事件的描述
要实现与用户的互动,就要靠在这些事件上做文章。
文件对话开始( )
当文件选择窗口将要弹出时触发。
文件排队(
file object
)当一个文件被添加到上传队列时,将触发该事件,并且提供的唯一参数是包含文件信息的file对象。
文件队列错误(
file object, error code, message
)当文件未能添加到上载队列时,会触发此事件。失败的原因可能是文件大小超过了您允许的值、文件为空或者文件队列已满。
该事件提供了三个参数。第一个参数是当前有问题的文件对象,第二个参数是特定的错误代码。可以参考SWFUpload中定义的常量。队列错误
文件对话完成(
number of files selected, number of files queued, total number of files in the queued
)当选择文件并处理所选文件(意味着添加到上传队列)时,将立即触发此事件。可以在该事件中调用this.startUpload()方法实现文件的自动上传。
参数“选择的文件数”是指本次在文件选择框中选择的文件数。
参数“排队文件数”是指本次添加到上传队列中的文件数。
参数队列中的文件总数是指当前上传队列中有多少个文件(包括本次添加的文件)。
上传开始(
file object
)当文件即将上传时,将触发此事件。此事件为您提供了最后一次机会来验证文件信息、添加要上传的附加信息或在文件上传之前执行其他工作。您可以通过返回false来取消此文件的上传。
参数文件对象是当前要上传的文件的信息对象。
上传进度(
file object, bytes complete, total bytes
)在上传文件的过程中会反复触发该事件,上传进度条可以通过该事件实现。
参数文件对象是文件信息对象。
Parameter bytes complete是当前上载的字节数。
参数total bytes是文件中的总字节数。
上传错误(
file object, error code, message
)当文件上传中断或文件上传不成功时,将触发此事件。停止、取消文件上载或在uploadStart事件中返回false将触发此事件,但如果文件被取消但仍在队列中,则不会触发此事件。
参数文件对象是文件信息对象。
参数错误代码是错误代码。有关详细信息,请参考SWFUpload中定义的常量。上传_错误
上传成功(
file object, server data, received response
)当文件成功上传时,将触发此事件。
参数文件对象是文件信息对象。
参数服务器数据是服务器输出的数据。
上传完成(
file object
)当文件上载过程完成时(无论成功与否),将触发此事件,这表明此上载已完成,可以上载上载上载队列中的下一个文件。此事件之后,将开始上传队列中的下一个文件。
三、swfupload实例的方法
大多数方法是动态改变参数配置对象的方法。
销毁( )
当不再需要使用SWFUpload时,可以使用该方法销毁其实例和dom元素。
开始上传(
file_id
)开始上传队列中的指定文件。
file_id参数表示要上传的文件的id。如果未填写此参数,将上传队列中的第一个文件。
取消加载(
file_id, trigger_error_event
)取消文件的上传。
参数file_id是要取消的文件的id。如果参数未定义或未填写,队列中的第一个文件将被取消。
参数trigger_error_event接受布尔值。如果为false,取消文件将不会触发uploadError事件,默认情况下该事件为true。
stopUpload()
终止当前上传的文件将触发uploadError事件。如果当前没有上传任何文件,此方法将不起任何作用。
getStats()
获取队列的stats对象。
setStats (
stats_object
)修改队列的stats_object,并将修改后的stats_object作为参数传入。
获取文件(
file_id|index
)根据文件id或文件索引获取文件对象。使用文件id时,只能获取队列中的文件。使用文件索引时,可以获取所有文件(队列内外)。
addPostParam (
name, value
)将键/值对添加到由配置对象中的post_params指定的附加信息对象中
removePostParam (
name
)在配置对象中删除post_params中包含的键/值对,参数名是要删除的值的键名。
addFileParam (
file_id, name, value
)向将与其一起上传的特定文件添加附加信息。注意,只有在上传指定文件时,附加信息才会一起上传。配置对象中post_param设置的附加信息将在上传任何文件时随文件一起发送。
参数file_id是要指定的文件id,参数name和value分别是附加信息的名称和值。
移除文件参数(
file_id, name
)去掉addFileParam方法添加的附加信息,两个参数我就不用说了。
setUploadURL (
url
)在动态配置对象中设置upload_url的值。
setPostParams (
param_object
)在动态配置对象中设置post_params属性的值,新值将覆盖旧值。
参数param_object必须是对象的直接量,其属性和值只能是字符串。
设置文件类型(
types, description
)设置动态配置对象中file_types和file_types_description属性的值。两个参数都不能省略。
setFileSizeLimit (
file_size_limit
)设置动态配置对象中file_size_limit属性的值。
setFileUploadLimit (
file_upload_limit
)在动态配置对象中设置file_upload_limit属性的值。
setfilequeulimit(
file_queue_limit
)在动态配置对象中设置file_queue_limit属性的值。
setFilePostName (
file_post_name
)在动态配置对象中设置file_post_name属性的值。
setUseQueryString (
use_query_string
)在动态配置对象中设置use_query_string属性的值。
setButtonImageURL (
url
)在动态配置对象中设置button_image_url属性的值。
设置按钮尺寸(
width, height
)设置动态闪烁按钮的宽度和高度。这两个参数分别是宽度和高度的值。类型是数字,不能有单位。
设置按钮文本(
text
)在动态配置对象中设置button_text属性的值。
setButtonTextStyle (
css_style_text
)在动态配置对象中设置button_text_style属性的值。
setButtonTextPadding (
left, top
)设置动态Flash按钮的左内边距和上内边距。
设置按钮已禁用(
isDisabled
)动态闪烁按钮被禁用和禁用,参数为布尔值。
设置按钮光标(
buttonCursor
)在动态配置对象中设置button_cursor的值。
四。文件信息对象文件对象
在事件监控功能中,经常使用文件信息对象来获取文件的信息,以便进行下一步操作。
属性
类型
形容
身份证明(identification)
线
SWFUpload定义的文件id用于控制文件的上传。
指数
数字
文件的索引,在getFile(i)方法中使用
名字
线
文件的原始名称,不包括路径。
类型
线
列出文件类型
创建日期
日期
文件的创建日期。
修改日期
日期
文件的最后修改日期。
文件状态
数字
当前文件状态,请参考SWFUpload中定义的常量。FILE_STATUS了解详情。
动词(verb的缩写)队列状态对象统计对象
用于获取当前队列的状态。
属性
类型
形容
正在进行中
数字
获得的值为1或0,表示当前队列中是否有正在上传的文件。
文件_排队
数字
上载队列中的当前文件数
成功_上传
数字
已成功上载的文件数(这意味着已触发uploadSuccess事件)
上传_错误
数字
上传失败的文件数(包括已取消的文件)
上传_已取消
数字
已取消上载的文件数
队列_错误
数字
触发fileQueueError事件的文件数。
不及物动词一些常数
为了便于理解,定义一些常数。
常数名称
形容
SWFUpload.instances
此常量是一个对象,代表页面上所有SWFUpload实例的引用集合,通过SWFUpload实例的movieName属性进行索引。
SWFUpload.movieCount
页面上存在的SWFUpload实例的数量
SWFUpload。QUEUE_ERROR超出队列限制
用户选择的文件数量超过了允许的数量。
SWFUpload。QUEUE_ERROR文件超出大小限制
的文件大小超过了允许的大小。
SWFUpload。QUEUE_ERROR零字节文件
文件是空的。
SWFUpload。QUEUE_ERROR无效_文件类型
不允许的文件类型
SWFUpload。上传_错误。HTTP _错误
服务器返回的状态代码不是200。
SWFUpload。上传_错误。缺少_上传_URL
未设置Upload_url。
SWFUpload。上传_错误。IO _错误
读取或传输文件时出错。
SWFUpload。上传_错误。安全性_错误
上传受到安全限制。
SWFUpload。上传_错误。超过上传限制
上传的文件数量超过了允许的最大值。
SWFUpload。上传_错误。上传_失败
出现上传错误。
SWFUpload。上传_错误。未找到指定的文件标识
传递给startUpload()方法的文件id不存在。
SWFUpload。上传_错误。文件验证失败
uploadStart()方法返回false。
SWFUpload。上传_错误。文件_已取消
上传被取消。
SWFUpload。上传_错误。上传_已停止
上传被终止。
SWFUpload。文件状态。排队
文件正在队列中等待上载。
SWFUpload。文件状态。正在进行中
文件正在上传。
SWFUpload。文件状态。错误
将文件添加到队列或上传文件时出错。
SWFUpload。文件状态。完成
文件已成功上传。
SWFUpload。文件状态。
文件已取消上传。
SWFUpload。光标。箭头
用鼠标箭头显示
SWFUpload。光标。手
鼠标显示为一只手。
SWFUpload。窗口模式。窗户
Flash按钮将显示在页面的所有dom元素上。
SWFUpload。窗口模式。不透明的
允许其他dom元素覆盖Flash按钮。
SWFUpload。窗口模式。透明的
允许透明显示Flash按钮。
内容太多了,让我觉得有点乱。如果还是不知道怎么用,建议先看看官网的使用流程,知道怎么用之后再看看这些属性,事件,方法,常量等等。
这就是本文的全部内容。希望对大家有帮助,同时也希望大家多多支持!