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的JS配置中的上传中可以这样设置来传递SESSION ID
post_params: {“PHPSESSID” : “<?php echo session_id(); ?>”},
在PHP文件中可以这样接收SESSION ID并找到原来的SESSION:
if (isset($_POST["PHPSESSID"])) {
session_id($_POST["PHPSESSID"]);
}
session_start();
■ 关于swfupload上传中文文件名乱码的问题
□ 实际上是由于编码的问题造成的,程序使用的utf-8,文件名传递时也是这种编码,因此造成乱码或文件不能保存,仅是需要修改接收文件,以PHP为例,upload.php中
$file_name = $_FILES[$upload_name]['name'];
$file_name=iconv(“UTF-8″,”GB2312″,$file_name);
这样即可解决。
具体的使用实例,可以参考SWFUpload中的DEMO中的simpledemo和featuresdemo,其中的handlers.js是一些事件函数的定义,值得一提的是事件处理函数中的this指得就是SWFUpload的一个实例
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/cwmdream/archive/2010/09/23/5902275.aspx
分享到:
相关推荐
**SWFUpload中文详细说明文档** SWFUpload是一款开源的JavaScript和Flash相结合的上传组件,它允许用户在网页上实现批量、多文件选择上传的功能,同时提供了丰富的自定义选项和事件处理机制,使得开发者可以轻松地...
这包括设置上传URL、文件类型限制、最大文件大小、文件数量限制等参数。例如: ```javascript var settings = { upload_url: "upload.php", file_post_name: "Filedata", file_size_limit : "10 MB", file_types...
1. **初始化设置**:SWFUpload 的使用始于创建一个实例,开发者需要配置各种参数,如上传URL、文件类型限制、最大上传文件大小等,然后通过JavaScript调用`SWFUpload.getInstance()`来实例化组件。 2. **事件处理**...
5. **JavaScript设置**:在index.asp或相关的JavaScript文件中,我们需要配置SWFUpload的参数,如文件类型、最大上传大小、上传URL等。 在批量上传方面,SWFUpload支持一次选择多个文件进行上传,这样用户无需反复...
4. **参数配置**:SWFUpload允许通过配置对象调整其行为,如设置上传URL、允许的文件类型、最大文件大小等,以满足不同项目的具体需求。 5. **样例代码**:"SWFUpload v2.2.0.1 Samples.zip"包含了实际的示例项目,...
提供的`.htm`文件是SWFUpload的官方文档,包含了详细的API参考和使用指南。`_files`目录可能包含了一些示例文件和资源,用于帮助开发者更好地理解和应用SWFUpload。 6. **源码分析** 对于想要深入了解SWFUpload...
在视图层,编写HTML和JavaScript代码来初始化SwfUpload实例,设置上传参数如文件类型、大小限制等,并定义上传成功后的回调函数。 配置文件的修改: 在使用SwfUpload时,可能需要修改其配置文件,比如设置允许上传...
配置SwfUpload包括设置按钮外观、上传参数、错误处理、文件类型检查等。例如,你可以使用`swfuploadSettings`对象来定义上传URL、文件大小限制、并发上传数量等。 5. **预览和缩略图** SwfUpload支持图片预览功能...
下面将详细介绍SWFUpload的关键知识点: 1. **基本概念**: - SWFUpload:一个基于Flash的JavaScript库,用于在浏览器中实现文件上传功能,支持多文件选择、进度显示、预览等特性。 - Flash:SWFUpload依赖于...
下面将详细阐述SWFUpload的工作原理以及如何在ASP环境中集成和使用它。 1. **SWFUpload简介** SWFUpload是一个基于Flash的文件上传组件,它解决了传统HTML文件输入框只能单个文件上传的问题,支持批量上传和预览...
这段代码设置了SWFUpload的基本参数,如上传文件的URL、文件大小限制、文件类型限制、上传文件名的参数名、文件上传和队列的限制、自定义设置以及调试模式。此外,还详细配置了按钮的样式和行为,以及上传过程中各种...
2. **初始化设置**:配置SwfUpload的参数,如上传URL、文件类型限制等。 3. **创建上传按钮**:通过JavaScript创建SwfUpload所需的上传按钮。 4. **处理上传事件**:绑定上传事件监听器,处理上传过程中的各种状态。...
2. **初始化设置**:配置SWFUpload实例,设定如上传URL、文件类型、最大文件大小等参数。 3. **创建上传按钮**:使用JavaScript生成SWFUpload所需的隐藏Flash对象,并关联到页面上的HTML按钮。 4. **监听事件**:...
在本项目中,“SWFUpload多图上传、C#后端跨域传文件带参数”表明我们将探讨如何利用SWFUpload上传多个图片,并在C#后端处理这些文件,同时解决跨域问题并传递额外的参数。 首先,我们需要了解SWFUpload的工作原理...
本文将详细探讨如何在ThinkPHP中集成Swfupload插件,实现多图上传功能。 首先,我们要了解ThinkPHP的基本架构。ThinkPHP是一款基于MVC模式的PHP框架,它提倡简洁、高效的开发方式,通过模型-视图-控制器(MVC)设计...
3. **配置SWFUpload**:配置SWFUpload的参数,如文件类型、最大上传大小、上传URL等。 4. **集成SWFUpload到Panel**:将SWFUpload实例添加到EXTJS3的Panel中,并设置适当的事件监听器,以便在文件上传过程中响应各种...
2. **设置参数**:通过JavaScript配置SwfUpload的行为,例如设置上传URL、文件类型限制、最大文件大小、并发上传数量等。此外,还可以自定义上传开始、进度更新、文件成功上传和错误处理的回调函数。 3. **创建上传...
- **初始化设置**:配置SWFUpload对象,包括上传URL、文件类型、文件大小限制等参数。 - **事件绑定**:注册事件处理器,如文件选择后的处理函数。 - **启动上传**:调用SWFUpload的startUpload()方法开始上传。 ...
在提供的压缩包中有一个名为"swfUpload组件上传.doc"的文档,可能包含了关于如何使用SWFUpload 的详细步骤、源码解析或者常见问题解答。通常这类文档会涵盖SWFUpload 的配置选项、事件处理方法、错误处理策略等内容...
**SWFUpload 跨域请求处理详解** 在Web开发中,SWFUpload是一个非常流行的JavaScript库,用于实现浏览器端的文件上传功能。尤其在处理大文件上传或需要跨域请求时,SWFUpload展现了其独特的优势。这篇我们将深入...