什么是SWFUpload.docx
- 文档编号:11344302
- 上传时间:2023-02-28
- 格式:DOCX
- 页数:34
- 大小:33.10KB
什么是SWFUpload.docx
《什么是SWFUpload.docx》由会员分享,可在线阅读,更多相关《什么是SWFUpload.docx(34页珍藏版)》请在冰豆网上搜索。
什么是SWFUpload
什么是SWFUpload?
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统
[编辑本段]SWFUpload的主要特点
*可以同时上传多个文件;
*类似AJAX的无刷新上传;
*可以显示上传进度;
*良好的浏览器兼容性;
*兼容其他JavaScript库(例如:
jQuery,Prototype等);
*支持Flash8和Flash9;
SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。
在使用SWFUpload之前,请确认你具备一定的JavaScript和DOM知识。
在实际开发中,大部分的错误都是由于错误的设置和低劣的EventHandlers处理程序所造成的。
[编辑本段]文档中文翻译
http:
//www.v-
[编辑本段]效果演示
*ClassicFormDemohttp:
//demo.swfupload.org/formsdemo;
*FeaturesDemohttp:
//demo.swfupload.org/featuresdemo;
*ApplicationDemohttp:
//demo.swfupload.org/applicationdemo;
*v1.0.2PluginDemohttp:
//demo.swfupload.org/v102demo;
[编辑本段]选择合适的Flash控件
在发行包(SWFUploadv2)中含有2个版本的Flash控件(swfupload_f8.swf与wfupload_f9.swf),其中第一个版本拥有最佳的兼容性,但是为此损失了部分功能;而第二个版本提供了一些附加的功能但是损失了兼容性。
[编辑本段]SWFUpload的初始化与配置
首先,在页面中引用SWFUpload.js,如
//www.swfupload.org/swfupload.js"> 然后,初始化SWFUpload,如 varswfu; window.onload=function(){ swfu=newSWFUpload({ 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: "WebImageFiles",文件类型描述 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中的FileObject 在SWFUpload的使用过程中,无论在客户端还是服务器端都要和FileObject打交道,在一个FileObject中包含了以下内容: { id: string,//SWFUploadfileid,usedforstartingorcancellingandupload index: number,//TheindexofthisfileforuseingetFile(i) name: string,//Thefilename.Thepathisnotincluded. size: number,//Thefilesizeinbytes type: string,//Thefiletypeasreportedbytheclientoperatingsystem creationdate: Date,//Thedatethefilewascreated modificationdate: Date,//Thedatethefilewaslastmodified filestatus: number,//Thefile'scurrentstatus.UseSWFUpload.FILE_STATUStointerpretthevalue. } [编辑本段]SWFUpload中的方法 +setPostParams(param_object) -描述 动态修改SWFUpload初始化设置中的post_params属性,其中所有的值都将被覆盖。 -参数 param_object: 一个simpleJavaScriptobject,所有的name/value都必须是字符串,例如(this.setPostParams({"Mari": name});)。 -返回 void [编辑本段]SWFUpload中的事件 SWFUpload在运行过程中提供了多种事件,这些事件可以让开发者借助句柄来改变页面UI、改变行为,或者报告错误。 所有这些事件都可以在一个SWFUpload实体中被调用,这意味着在这些事件对应的函数中,你可以用this关键字来代替引用SWFUpload实体。 +fileDialogComplete(numberoffilesselected) -触发条件 1.用户选择好了要上传文件,并关闭对话框; 2.用户什么也没选,并取消对话框; 如果你希望在用户选择完文件后自动开始上传操作,那么可以将this.startUpload()操作放在这里。 -传入参数 numberoffilesselected: 将返回用户所选取的文件个数。 +uploadStart(fileobject) -触发条件 该事件在文件上传之前触发,它用于完成一些准备工作,比如传递参数;负责响应该事件的句柄函数可以有2个返回值(true或false)当返回值为false时,整个上传将被取消;当返回值为true时上传过程继续进行。 而如果返回值为false,则通常是由一个uploadError事件所导致的。 注: 官方帮助文档的原文中对该事件的描述中有这样一句: “Ifyoureturn'true'ordonotreturnanyvaluethentheuploadproceeds.”,从中可以看到既定的设计是当不返回任何值的时候应该等同于返回true,但是笔者在开发中发现必须明确返回值,否则上传进程将停止响应,不知是否是一个bug呢? -传入参数 fileobject: 文件对象 +uploadComplete(fileobject) -触发条件 在完成一个上传周期后(在uploadError或uploadSuccess之后),此时一个上传操作已经结束,另一个上传操作可以开始了。 -传入参数 fileobject: 文件对象 +uploadProgress(fileobject,bytescomplete,totalbytes) -触发条件 该事件在整个文件的上传过程中定期性的被Flash控件自动触发,用以帮助开发者实时更新页面UI来制作上传进度条。 注意: 该事件在Linux版本的FlashPlayer中存在问题,目前还无法解决。 -传入参数 fileobject: 文件对象 bytescomplete: 已经上传完毕的文件字节数 totalbytes: 文件总体积的字节数 [编辑本段]常见错误 ■所上传的文件体积并未超出SWFUpload所设置的数值,但为何无法成功上传? □通常这是由于服务器端的限制所造成的,以Apache+PHP为例,请修改php.ini中的post_max_size与upload_max_filesize两项设置。 ■在带有Session验证的网站后台中SWFUpload无法正常工作? □这是因为SWFUpload在上传时相当于重新开辟了一个新的Session进程,因此无法与原有程序的Session保持一致,这就需要在上传时传递原有程序的SessionID,根据它来“找回”其应有的Session。 详细说明文档: http: //www.v- SWFUploadv2说明文档 特别提醒 由于FlashPlayer10的升级,SWFUploadV2.2.0版本前的程序会出现不兼容问题。 详细见FlashPlayer10升级导致SWFUpload程序异常,SWFUploadV2.2.0的文档已更新,该V2.1.0帮助文档不再维护! 。 TOC SWFUpload SWFUpload2 概述 入门 SWFUploadJavaScript对象 构造器 全局变量和常量 instances movieCount QUEUE_ERROR UPLOAD_ERROR FILE_STATUS DefaultEventHandlers 属性 customSettings movieName 方法 addSetting(不推荐使用) getSetting(不推荐使用) retrieveSetting(v2.1.0中已删除) destroy(v2.1.0中新增) displayDebugInfo selectFile selectFiles startUpload cancelUpload stopUpload getStats setStats getFile addPostParam removePostParam addFileParam removeFileParam setUploadURL setPostParams setFileTypes setFileSizeLimit setFileUploadLimit setFileQueueLimit setFilePostName setUseQueryString setDebugEnabled 事件 flashReady swfUploadLoaded fileDialogStart fileQueued fileQueueError fileDialogComplete uploadStart uploadProgress uploadError uploadSuccess uploadComplete debug SWFUpload功能对象 SettingsObject SettingsDescription FileObject StatsObject SWFUpload插件(未译) 存在的问题(未译) SWFUpload SWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具.它结合了FLASH和JavaScript的功能,以提供一种超越了传统的浏览器中 SWFUpload提供的主要功能: 在文件选择对话框中能够进行文件多选 页面无刷新的上传 提供上传进度的事件回调,实时显示上传进度 良好的浏览器兼容性 采用了命名空间以兼容其它JS的库(例如jQuery,Prototype,等等) 对FLASH8和FLASH9播放器的支持 SWFUpload背后的设计思想和其它基于Flash的上传工具是不同的。 它将浏览器的中UI交给开发人员来控制。 开发人员能够利用XHTML,CSS,Javascript来定制符合他们网站风格的UI上传元素。 然后使用它提供的一组简单的JS事件来更新上传状态,开发人员能够利用这些事件来及时更新页面中的上传进度UI。 SWFUploadv2 SWFUploadv2包含了新的高级功能,改善了稳定性,解决了FlashPlayer中的一些bug,并且提供一套有用的插件。 新的功能包括: 在文件上传的同时能够发送额外的POST数据(只针对Flash9版本) 针对每一个文件上传发送POST/GET数据 更直观的事件回调 动态修改实例设置 接收服务端返回的数据(只针对Flash9版本) 非取消形式的停止文件上传 自定义上传的顺序 支持单文件、多文件的文件的选择 文件入队数量,文件上传数量和文件大小的限制 更合理地处理0字节的文件 针对每个文件在上传前都提供一个最后确认的时间回调 解决了v1.0.2版本中未描述到的关于Flash的bug 解决的v1.0.2中的bug: 在IE中,刷新的时候FLASH无法加载(详细可见我之前的debug过程) 在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 Race-conditionswhenfilesarecached 兼容ASP.NetForms SWFUploadv2延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展 概述 传统的HTML上传 标准的HTML上传表单为用户提供一个文本框和按钮来选择文件,选中的文件是随着form表单提交的。 整个文件上传完成之后,下一个页面才会显示,并且不能对选择的文件做预设的文件检验,例如文件大小限制,文件类型限制。 当文件上传时,用户获得的可用的反馈信息很少。 传统的HTML上传模式十分简单,线性的,几乎所有浏览器都支持它。 SWFUpload SWFUpload使用一个隐藏的Flash影片来控制文件的选择和上传。 JavaScript用来激活文件选择对话框。 此文件选择对话框是可以设置允许用户选择一个单独的文件或者是多个文件。 选择的的文件类型也是可以被限制的,因此用户只能选择指定的适当的文件,例如*.jgp;*.gif。 当选定文件以后,每个文件都会被验证和处理。 当Flash上传文件的时候,由开发人员预定义的Javascript事件会被定时触发以便来更新页面中的UI,同时还提供上传状态和错误信息。 选定的文件的上传和它所在页面、表单是独立的。 每个文件都是单独上传的,这就保证了服务端脚本能够在一个时间点更容易地处理单个文件。 虽然Flash提供了上传服务,但是页面并不会提交或者重新载入。 相比于标准的HTMLForm,SWFUpload的使用方式更像是AJAX程序,页面中的Form会和FLASH控制的文件上传单独处理。 入门 SWFUpload并不是拖放式的上传控件,它需要JavaScript和DOM的知识。 一些可用的演示展示了它能够完成什么事情以及它是如何完成这些常见的任务。 SWFUpload由4部分组成: 初始化和设置 JavaScript库: SWFUpload.js Flash控制元素: SWFUpload_f8.swf或者SWFupload_f9.swf 事件处理 使用SWFUpload遇到的多数问题是由不正确地设置或者定义了糟糕的处理事件引起的。 初始化和设置 SWFpload必须在页面中初始化,一般可以在window.onload事件中完成此操作。 它的构造函数需要一个Object类型的设置对象。 这个设置对象一般是一个直接定义的Object类型变量,直接传递给SWFUpload的构造函数。 初始化的SWFUpload对象的引用需要保留下来,因为当显示文件选择对话框和启动文件上传的时候需要这个实例的引用。 例如: 用直接定义的Object类型变量设置初始化SWFUpload对象 varswfu; window.onload=function(){ swfu=newSWFUpload({ upload_url: "http: //www.swfupload.org/upload.php", flash_url: "http: //www.swfupload.org/swfupload_f9.swf", file_size_limit: "20480" }); }; 例如: 用存储在变量中的设置对象初始化SWFUpload对象 varswfu; window.onload=function(){ varsettings_object={ upload_url: "http: //www.swfupload.org/upload.php", flash_url: "http: //www.swfupload.org/swfupload_f9.swf", file_size_limit: "20480" }; swfu=newSWFUpload(settings_object); }; JavaScript库 该JavaScript库文件(swfupload.js)应该包含在需要上传功能的页面中。 它对FlashPlayer8和FlashPlayer9SWFUpload版本都是兼容、可用的。 当SWFUpload创建完成并能访问它的一系列功能时,开发人员可以来控制此实例。 例如: 添加SWFUpload.js到页面中 //www.swfupload.org/swfupload.js"> 例如: 根据需要的设置来初始化SWFUpload,同时把它的seleteFiles方法绑定到一个按钮的Click事件上。 varswfu=newSWFUpload({ upload_url: "http: //www.swfupload.org/upload.php", flash_url: "http: //www.swfupload.org/swfupload_f9.swf" }); document.getElementById("BrowseButton").onclick=function(){swfu.selectFiles();}; Flash控制元素 SWFUploadJavaScript库动态加载Flash控制元素(swfupload_f8.swf/swfupload_f9.swf)。 该Flash控制元素有两个版本。 swfupload_f8.swf支持FlashPlayer8以及更高版本。 它在提供了更好的兼容性同时牺牲了一些功能。 swfupload_f9.swf支持FlashP
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 什么是 SWFUpload