分享
 
 
 

SWFUpload

王朝百科·作者佚名  2010-03-11
窄屏简体版  字體: |||超大  

什么是SWFUpload?SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。

SWFUpload的主要特点* 可以同时上传多个文件;

* 类似AJAX的无刷新上传;

* 可以显示上传进度;

* 良好的浏览器兼容性;

* 兼容其他JavaScript库 (例如:jQuery,Prototype等);

* 支持Flash 8和Flash 9;

SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。

在使用SWFUpload之前,请确认你具备一定的JavaScript和DOM知识。在实际开发中,大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。

文档中文翻译http://www.v-sky.com/doc/swfupload/v2.1.0/Documentation.html

效果演示* Classic Form Demo http://demo.swfupload.org/formsdemo ;

* Features Demo http://demo.swfupload.org/featuresdemo ;

* Application Demo http://demo.swfupload.org/applicationdemo ;

* v1.0.2 Plugin Demo http://demo.swfupload.org/v102demo ;

选择合适的Flash控件在发行包(SWFUpload v2)中含有2个版本的Flash控件(swfupload_f8.swf 与wfupload_f9.swf),其中第一个版本拥有最佳的兼容性,但是为此损失了部分功能;而第二个版本提供了一些附加的功能但是损失了兼容性。

SWFUpload的初始化与配置首先,在页面中引用SWFUpload.js ,如

<script type="text/javascript" src="http://www.swfupload.org/swfupload.js"></script>

然后,初始化SWFUpload ,如

var swfu;

window.onload = function () {

swfu = new SWFUpload({

upload_url : "http://www.swfupload.org/upload.php",

flash_url : "http://www.swfupload.org/swfupload_f9.swf", file_size_limit : "20480"

});

};

以下是一个标准的SWFUpload初始化设置所需的参数,你可以根据需要自己进行删减:

{

upload_url : "http://www.swfupload.org/upload.php", 处理上传请求的服务器端脚本URL

file_post_name : "Filedata", 是POST过去的$_FILES的数组名

post_params : {

"post_param_name_1" : "post_param_value_1",

"post_param_name_2" : "post_param_value_2",

"post_param_name_n" : "post_param_value_n"

},

file_types : "*.jpg;*.gif", 允许上传的文件类型

file_types_description: "Web Image Files", 文件类型描述

file_size_limit : "1024", 上传文件体积上限,单位MB

file_upload_limit : 10, 限定用户一次性最多上传多少个文件,在上传过程中,该数字会累加,如果设置为“0”,则表示没有限制

file_queue_limit : 2, 上传队列数量限制,该项通常不需设置,会根据file_upload_limit自动赋值

flash_url : "http://www.swfupload.org/swfupload_f9.swf", Flash控件的URL

flash_width : "1px",

flash_height : "1px",

flash_color : "#FFFFFF",

debug : false, 是否显示调试信息

swfupload_loaded_handler : swfupload_loaded_function, 当Flash控件成功加载后触发的事件处理函数

file_dialog_start_handler : file_dialog_start_function, 当文件选取对话框弹出前出发的事件处理函数

file_queued_handler : file_queued_function,

file_queue_error_handler : file_queue_error_function,

file_dialog_complete_handler : file_dialog_complete_function, 当文件选取对话框关闭后触发的事件处理函数

upload_start_handler : upload_start_function, 开始上传文件前触发的事件处理函数

upload_progress_handler : upload_progress_function,

upload_error_handler : upload_error_function,

upload_success_handler : upload_success_function, 文件上传成功后触发的事件处理函数

upload_complete_handler : upload_complete_function,

debug_handler : debug_function,

custom_settings : { 自定义设置

custom_setting_1 : "custom_setting_value_1",

custom_setting_2 : "custom_setting_value_2",

custom_setting_n : "custom_setting_value_n",

}

}

SWFUpload中的File Object在SWFUpload的使用过程中,无论在客户端还是服务器端都要和File Object打交道,在一个File Object中包含了以下内容:

{

id : string, // SWFUpload file id, used for starting or cancelling and upload

index : number, // The index of this file for use in getFile(i)

name : string, // The file name. The path is not included.

size : number, // The file size in bytes

type : string, // The file type as reported by the client operating system

creationdate : Date, // The date the file was created

modificationdate : Date, // The date the file was last modified

filestatus : number, // The file's current status. Use SWFUpload.FILE_STATUS to interpret the value.

}

SWFUpload中的方法+setPostParams(param_object)

-描述

动态修改SWFUpload初始化设置中的post_params属性,其中所有的值都将被覆盖。

-参数

param_object:一个simple JavaScript object,所有的name/value都必须是字符串,例如(this.setPostParams({ "Mari": name });)。

-返回

void

SWFUpload中的事件SWFUpload在运行过程中提供了多种事件,这些事件可以让开发者借助句柄来改变页面UI、改变行为,或者报告错误。所有这些事件都可以在一个SWFUpload实体中被调用,这意味着在这些事件对应的函数中,你可以用this关键字来代替引用SWFUpload实体。

+fileDialogComplete (number of files selected)

-触发条件

1. 用户选择好了要上传文件,并关闭对话框;

2. 用户什么也没选,并取消对话框;

如果你希望在用户选择完文件后自动开始上传操作,那么可以将 this.startUpload() 操作放在这里。

-传入参数

number of files selected:将返回用户所选取的文件个数。

+uploadStart (file object)

-触发条件

该事件在文件上传之前触发,它用于完成一些准备工作,比如传递参数;负责响应该事件的句柄函数可以有2个返回值(true 或 false)当返回值为false时,整个上传将被取消;当返回值为true时上传过程继续进行。而如果返回值为false,则通常是由一个uploadError事件所导致的。

注:官方帮助文档的原文中对该事件的描述中有这样一句:“If you return 'true' or do not return any value then the upload proceeds.”,从中可以看到既定的设计是当不返回任何值的时候应该等同于返回true,但是笔者在开发中发现必须明确返回值,否则上传进程将停止响应,不知是否是一个bug呢?

-传入参数

file object:文件对象

+uploadComplete (file object)

-触发条件

在完成一个上传周期后(在uploadError 或 uploadSuccess之后),此时一个上传操作已经结束,另一个上传操作可以开始了。

-传入参数

file object:文件对象

+uploadProgress (file object, bytes complete, total bytes)

-触发条件

该事件在整个文件的上传过程中定期性的被Flash控件自动触发,用以帮助开发者实时更新页面UI来制作上传进度条。

注意:该事件在Linux版本的Flash Player中存在问题,目前还无法解决。

-传入参数

file object:文件对象

bytes complete:已经上传完毕的文件字节数

total bytes:文件总体积的字节数

常见错误■所上传的文件体积并未超出SWFUpload所设置的数值,但为何无法成功上传?

□ 通常这是由于服务器端的限制所造成的,以Apache+PHP为例,请修改php.ini中的post_max_size与upload_max_filesize两项设置。

■在带有Session验证的网站后台中SWFUpload无法正常工作?

□ 这是因为SWFUpload在上传时相当于重新开辟了一个新的Session进程,因此无法与原有程序的Session保持一致,这就需要在上传时传递原有程序的SessionID,根据它来“找回”其应有的Session。

■ 关于swfupload上传中文文件名乱码的问题

□ 实际上是由于编码的问题造成的,程序使用的utf-8,文件名传递时也是这种编码,因此造成乱码或文件不能保存,仅是需要修改接收文件,以PHP为例,upload.php中

$file_name = $_FILES[$upload_name]['name'];

$file_name=iconv("UTF-8","GB2312",$file_name);

这样即可解决。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有