首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

SWFUpload论说文档

2012-11-20 
SWFUpload说明文档SWFUpload提供的主要功能:?在文件选择对话框中能够进行文件多选 页面无刷新的上传 提供

SWFUpload说明文档

SWFUpload提供的主要功能:

?

在文件选择对话框中能够进行文件多选 页面无刷新的上传 提供上传进度的事件回调,实时显示上传进度 良好的浏览器兼容性 采用了命名空间以兼容其它JS的库 (例如 jQuery, Prototype, 等等) 对FLASH 8和FLASH 9播放器的支持 对FLASH 9和FLASH 10播放器的支持(V2.2.0版本放弃了对Flash 8的支持)

?

SWFUpload背后的设计思想和其它基于Flash的上传工具是不同的。它将浏览器的中UI交给开发人员来控制。开发人员能够利用 XHTML,CSS,Javascript来定制符合他们网站风格的UI上传元素。然后使用它提供的一组简单的JS事件来更新上传状态,开发人员能够利用这些事件来及时更新页面中的上传进度UI。

不幸的是Flash Player 10 更严格的安全机制迫使我们不得不将一个Flash Button放入Flash影片中。SWFUpload提供API供开发者通过图片、文字、CSS的方式来自定制更灵活的UI显示。

SWFUpload v2

SWFUpload v2包含了新的高级功能,改善了稳定性,解决了FlashPlayer中的一些bug,并且提供一套有用的插件。新的功能包括:

?

兼容了Flash Player 10的安全限制问题 在文件上传的同时能够发送额外的POST数据 针对每一个文件上传发送POST/GET数据 更直观的事件回调 动态修改实例设置 接收服务端返回的数据 非取消形式的停止文件上传 自定义上传的顺序 支持单文件、多文件的文件的选择 文件入队数量,文件上传数量和文件大小的限制 更合理地处理0字节的文件 针对每个文件在上传前都提供一个最后确认的时间回调 解决了v1.0.2版本中未描述到的关于Flash的bug 解决的v1.0.2中的bug: 在IE中,刷新的时候FLASH无法加载(详细可见我之前的debug过程) 在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 Race-conditions when files are cached 兼容ASP.Net Forms

?

SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展

概述传统的HTML上传

标准的HTML上传表单为用户提供一个文本框和按钮来选择文件,选中的文件是随着form表单提交的。整个文件上传完成之后,下一个页面才会显示,并且不能对选择的文件做预设的文件检验,例如文件大小限制,文件类型限制。当文件上传时,用户获得的可用的反馈信息很少。

传统的HTML上传模式十分简单,线性的,几乎所有浏览器都支持它。

SWFUpload

SWFUpload使用一个隐藏的Flash影片来控制文件的选择和上传。 JavaScript用来激活文件选择对话框。 此文件选择对话框是可以设置允许用户选择一个单独的文件或者是多个文件。
SWFUpload使用一个Flash影片来控制文件的选择和上传。此FLASH中包含一个用户自定制UI的按钮,点击该按钮能够激活 Flash本身的高级文件上传对话框,它能够根据用户的设置来进行单文件或者是多文件的上传。 选择的的文件类型也是可以被限制的,因此用户只能选择指定的适当的文件,例如*.jgp;*.gif。

例如:用存储在变量中的设置对象初始化SWFUpload对象

var swfu; window.onload = function () { var settings_object = { upload_url : "http://www.swfupload.org/upload.php", flash_url : "http://www.swfupload.org/swfupload.swf", button_placeholder_id : "spanSWFUploadButton", file_size_limit : "20480" }; swfu = new SWFUpload(settings_object); };

JavaScript 库

该JavaScript库文件(swfupload.js)应该包含在需要上传功能的页面中。

当SWFUpload创建完成并能访问它的一系列功能时,开发人员可以来控制此实例。

例如: 添加SWFUpload.js到页面中

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

例如: 根据需要的设置来初始化SWFUpload,同时把它的seleteFiles方法绑定到一个按钮的Click事件上。

var swfu = new SWFUpload({ upload_url : "http://www.swfupload.org/upload.php", flash_url : "http://www.swfupload.org/swfupload.swf", button_placeholder_id : "spanSWFUploadButton" }); document.getElementById("BrowseButton").onclick = function () { swfu.selectFiles(); };

Flash 控制元素

SWFUpload JavaScript库动态加载Flash控制元素(swfupload.swf)。该Flash控制元素有两个版本。swfupload_f8.swf支持Flash Player8以及更高版本。它在提供了更好的兼容性同时牺牲了一些功能。swfupload_f9.swf支持Flash Player9.0.28以及更高版本。它在提供了额外的功能同时牺牲了使用Flash Player8的用户。

Flash控制元素的文件地址在初始化的时候就应该在SWFUpload设置对象中定义。

Flash控制元素是一个很小的的Flash影片,它提供了文件浏览、检验和上传功能。它在页面中展现给用户的是一个UI可自定制的按钮,但该 Flash会在需要时候通过与Javascript通信来通知浏览器处理更新。

事件处理

开发人员必须定义一系列JavaScript函数来处理SWFUpload事件回调,当一些不同的重要事件发生的时候,这些函数会被触发。

通过处理SWFUpload的事件,开发人员能够提供关于上传进度、出错信息以及上传完成等的信息反馈。

例如: swfupload的处理事件和初始化

// uploadStart处理事件。该函数变量在设置对象中指定给了upload_start_handler属性。 var uploadStartEventHandler = function (file) { var continue_with_upload; if (file.name === "the sky is blue") { continue_with_upload = true; } else { continue_with_upload = false; } return continue_with_upload; }; //uploadSuccess处理事件。 该函数变量在设置对象中指定给了upload_success_handler属性。 var uploadSuccessEventHandler = function (file, server_data) { alert("The file " + file.name + " has been delivered to the server."); alert("The server responded with " + server_data); }; //创建SWFUpload实例,设置事件回调函数 var swfu = new SWFUpload({ upload_url : "http://www.swfupload.org/upload.php", flash_url : "http://www.swfupload.org/swfupload.swf", file_size_limit : "20480", upload_start_handler : uploadStartEventHandler, upload_success_handler : uploadSuccessEventHandler });

SWFUpload JavaScript 对象构造函数

SWFUpload.WINDOW_MODE.WINDOW是默认的模式. 该SWF将位于页面元素的最高层级。

SWFUpload.WINDOW_MODE.OPAQUE 该SWF可以被页面类的其他元素通过层级的设置来覆盖它。

SWFUpload.WINDOW_MODE.TRANSPARENT 该SWF的背景是透明的,可以透过它看到背后的页面元素。

属性

下面这个列表是相关属性的具体描述。使用其它属性或者对只读属性进行了写的操作都会造成SWFUpload出现问题。

customSettings (可读/可写)

customSettings属性是一个空的JavaScript对象,它被用来存储跟SWFUpload实例相关联的数据。它的内容可以使用设置对象中的custom_settings属性来初始化。

注意:一些插件使用customSettings对象来实现它们的内部控制。当重写整个 customSettings对象的时候需要务必小心。

例如:

// 初始化包含自定义设置的SWFUpload对象 var swfu = new SWFUpload({ custom_settings : { custom_setting_1 : "custom_setting_value_1", custom_setting_2 : "custom_setting_value_2", custom_setting_n : "custom_setting_value_n", } }); swfu.customSettings.custom_setting_1 = "custom_setting_value_1"; // 更改一个存在的自定义设置 swfu.customSettings.myNewCustomSetting = "new custom setting value"; // 添加一个新的自定义设置 //用一个全新的对象重写customSettings swfu.customSettings = { custom_setting_A : "custom_setting_value_A", custom_setting_B : "custom_setting_value_B" };

movieName(只读)

包含了该SWFUpload实例的惟一影片名字。该值被传递给Flash,用来完成Flash和JavaScript的通信。该值被用来索引实例在 SWFUpload.instances数组中的位置,你无法更改此值。

方法

下面的方法用来操作SWFUpload。其中有些方法可以跟元素(例如,按钮)的点击事件绑定,其它的方法供SWFUpload内部处理事件中调用。

object addSetting(

注意:在Linux下面此参数设置无效,接收的name总为Filedata,因此为了保证最大的兼容性,建议此参数使用默认值。

post_params

默认值:空的Object对象

post_params定义的是一个包含值对的object类型数据,每个文件上传的时候,其中的值对都会被一同发送到服务端。

注意:设置值对的时候,值只能是字符串或者数字。use_query_string

默认值:false

该属性可选值为true和false,设置post_params是否以GET方式发送。如果为false,那么则以POST形式发送。

requeue_on_error

默认值:false

该属性可选值为true和false。如果设置为true,当文件对象发生uploadError时(除开fileQueue错误和 FILE_CANCELLED错误),该文件对象会被重新插入到文件上传队列的前端,而不是被丢弃。如果需要,重新入队的文件可以被再次上传。如果要从上传队列中删除该文件对象,那么必须使用cancelUpload方法。

跟上传失败关联的所有事件同样会被一一触发,因此将上传失败的文件重新入队可能会和Queue Plugin造成冲突(或者是自动上传整个文件队列的自定义代码)。如果代码中调用了startUpload方法自动进行下一个文件的上传,同时也没有采取任何措施让上传失败的文件退出上传队列,那么这个重新入队的上传失败的文件又会开始上传,然后又会失败,重新入队,重新上传...,进入了无止境的循环。

该设置是在v2.1.0中引入的。

http_success

默认值:[]

该数组可自定义触发success事件的HTTP状态值。200的状态值始终会触发success,并且只有200的状态会提供 serverData。

当接受一个200以外的HTTP状态值时,服务端不需要返回内容。

file_types

默认值:*.*

设置文件选择对话框的文件类型过滤规则,该属性接收的是以分号分隔的文件类型扩展名,例如“ *.jpg;*.gif”,则只允许用户在文件选择对话框中可见并可选jpg和gif类型的文件。默认接收所有类型的文件。

提醒:该设置只是针对客户端浏览器的过滤,对服务端的文件处理中的文件类型过滤没有任何限制,如果你需要做严格的文件过滤,那么服务端同样需要程序检测。

file_types_description

默认值:All Files

设置文件选择对话框中显示给用户的文件描述。

file_size_limit

默认值:0

设置文件选择对话框的文件大小过滤规则,该属性可接收一个带单位的数值,可用的单位有B,KB,MB,GB。如果忽略了单位,那么默认使用KB。特殊值0表示文件大小无限制。

提醒:该设置只对客户端的浏览器有效,对服务端的文件处理没有任何限制,如果你需要做严格文件过滤,那么服务端同样需要程序处理。

热点排行