SWFUpload
中文文档地址是:www.v-sky/doc/swfupload/Documentation.html
网官上的DEMO为:/v220/index.htm
网官上的DEMO为:/v220/index.htm
下载地址:le/p/swfupload/
SWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具. 它结合了FLASH和JavaScript的功能,以提供一种超越了传统的浏览器中<input type="file" />标签提供的文件上传功能。
SWFUpload提供的主要功能:
∙ 在文件选择对话框中能够进行文件多选
∙ 页面无刷新的上传
∙ 提供上传进度的事件回调,实时显示上传进度
∙ 良好的浏览器兼容性
∙ 采用了命名空间以兼容其它JS的库 (例如 jQuery, Prototype, 等等)
∙
∙ 对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:
o 在IE中,刷新的时候FLASH无法加载(详细可见我之前的debug过程)
o 在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载
o Race-conditions when files are cached
∙ 兼容ASP.Net Forms
SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展
概述
传统的HTML上传
标准的HTML上传表单为用户提供一个文本框和按钮来选择文件,选中的文件是随着form表单提交的。整个文件上传完成之后,下一个页面才会显示,并且不能对选择的文件做预设的文件检验,例如文件大小限制,文件类型限制。当文件上传时,用户获得的可用的反馈信息很少。
传统的HTML上传模式十分简单,线性的,几乎所有浏览器都支持它。
SWFUpload
SWFUpload使用一个Flash影片来控制文件的选择和上传。此FLASH中包含一个用户自定制UI的按钮,点击该按钮能够激活Flash本身的高级文件上传对话框,它能够根据用户的设置来进行单文件或者是多文件的上传。 选择的的文件类型也是可以被限制的,因此用户只能选择指定的适当的文件,例如*.jgp;*.gif。
提醒:Flash Player 10的安全机制更严格,类似打开文件上传的对话框的操作,一定需要用户交互才触发,如果用脚本触发,会报#2176的运行时错误。因此V2.2.0版本在SWF中添加了一个可定制的Button让用户交互来打开文件对话框。
当选定文件以后,每个文件都会被验证和处理。当Flash上传文件的时候,由开发人员预定义的Javascript事件会被定时触发以便来更新页面中的UI,同时还提供上传状态和错误信息。
选定的文件的上传和它所在页面、表单是独立的。每个文件都是单独上传的,这就保证了服务端脚本能够在一个时间点更容易地处理单个文件。虽然Flash提供了上传服务,但是页面并不会提交或者重新载入。相比于标准的HTML Form,SWFUpload的使用方式更像是AJAX程序,页面中的Form会和FLASH控制的文件上传单独处理。
入门
SWFUpload并不是拖放式的上传控件,它需要JavaScript和DOM的知识。一些可用的演示展示了它能够完成什么事情以及它是如何完成这些常见的任务。
SWFUpload由4部分组成:
1. 初始化和设置(Javascript)
2. JavaScript 库: SWFUpload.js
3. SWFUpload.swf(V2.2.0版本放弃了对flash 8的支持)
4. 事件处理(Javascript)
使用SWFUpload遇到的多数问题是由不正确地设置或者定义了糟糕的处理事件引起的。
初始化和设置
SWFpload必须在页面中初始化,一般可以在load事件中完成此操作。它的构造函数需要一个Object类型的设置对象。 这个设置对象一般是一个直接定义的Object类型变量,直接传递给SWFUpload的构造函数。
初始化的SWFUpload对象的引用需要保留下来,因为当显示文件选择对话框和启动文件上传的时候需要这个实例的引用。
例如:用直接定义的Object类型变量设置初始化SWFUpload对象
var swfu; load = function () {
swfu = new SWFUpload({
upload_url : "/upload.php",
flash_url : "/swfupload.swf", button_placeholder_id : "spanSWFUploadButton",
file_size_limit : "20480" });
};
例如:用存储在变量中的设置对象初始化SWFUpload对象
var swfu; load = function () { var settings_object = { upload_url : "/upload.php", flash_url : "/swfupload.swf", button_placeholder_id : "spanSWFUploadButton", file_size_limit : "20480" }; swfu = new SWFUpload(settings_object); };
JavaScript 库
该JavaScript库文件(swfupload.js)应该包含在需要上传功能的页面中。
当SWFUpload创建完成并能访问它的一系列功能时,开发人员可以来控制此实例。
javascript全局数组例如: 添加SWFUpload.js到页面中
<script type="text/javascript" src="/swfupload.js"></script>
例如: 根据需要的设置来初始化SWFUpload
var swfu = new SWFUpload({ upload_url : "/upload.php", flash_url : "/swfupload.swf", button_placeholder_id : "spanSWFUploadButton" });
Flash 控制元素
SWFUpload JavaScript库动态加载Flash控制元素(swfupload.swf)。
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 : "/upload.php", flash_url : "/swfupload.swf", file_size_limit : "20480", upload_start_handler : uploadStartEventHandler, upload_success_handler : uploadSuccessEventHandler });
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论