SWFUpload文件上传插件用法详解

本文章来给大家介绍SWFUpload文件上传插件用法，SWFUpload的主要特点 * 可以同时上传多个文件； * 类似AJAX的无刷新上传； * 可以显示上传进度； * 良好的浏览器兼容性； * 兼容其他JavaScript库 (例如：jQuery, Prototype等)； * 支持Flash 8和Flash 9；

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。

上传控制提示文字

先找到参数
upload_progress_handler

我的是

upload_progress_handler : uploadProgress 
然后打开handlers.js文件。

查找函数  “uploadProgress”

修改为：

代码如下

复制代码

function uploadProgress(file, bytesLoaded, bytesTotal) {   try { if(bytesLoaded == bytesTotal) { var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);   var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setProgress(percent); progress.setStatus("正在解压，请稍等..."); } else { var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);   var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setProgress(percent); progress.setStatus("正在上传..."); } } catch (ex) { this.debug(ex); } }

自定义错误提示

由于swfupload会接受服务端返回的字符串，利用这一点，在PHP文件中，返回固定的字串。我返回的是的js数组类型的字符串：

?[Copy to clipboard]View Code PHP//出错
die(json_encode(array(0 =&gt; "uploaderror",1 =&gt; "您没有上传权限！")));
 
//上传成功
die(json_encode(array(0 =&gt; "",1 =&gt; ""))); 
数组的第一个元素在js分支语句中会用到，第二个元素就是显示的错误提示。
二、首先修改js
打开handlers.js文件，找到uploadSuccess函数。
原函数是

代码如下

复制代码

function uploadSuccess(file, serverData) {  try {   var progress = new FileProgress(file, this.customSettings.progressTarget);   progress.setComplete();   progress.setStatus("Complete.");   progress.toggleCancel(false);    } catch (ex) {   this.debug(ex);  } }  改为 function uploadSuccess(file, serverData) {    try {                 //接收服务端字符串并转为数组类型   serverData = eval(serverData);     if(serverData[0] != ""){    //出错    this.uploadError(file,serverData[0],serverData[1]);   }else{    //成功    var progress = new FileProgress(file, this.customSettings.progressTarget);    progress.setComplete();    progress.setStatus("上传成功！");    progress.toggleCancel(false);   }      } catch (ex) {   this.debug(ex);  } }  再找到uploadError函数 原函数是 function uploadError(file, errorCode, message) {  try {   var progress = new FileProgress(file, this.customSettings.progressTarget);   progress.setError();   progress.toggleCancel(false);     switch (errorCode) {   case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:    progress.setStatus("Upload Error: " + message);    this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:    progress.setStatus("Configuration Error");    this.debug("Error Code: No backend file, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:    progress.setStatus("Upload Failed.");    this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.IO_ERROR:    progress.setStatus("Server (IO) Error");    this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:    progress.setStatus("Security Error");    this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:    progress.setStatus("Upload limit exceeded.");    this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:    progress.setStatus("File not found.");    this.debug("Error Code: The file was not found, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:    progress.setStatus("Failed Validation.  Upload skipped.");    this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:    if (this.getStats().files_queued === 0) {     document.getElementById(this.customSettings.cancelButtonId).disabled = true;    }    progress.setStatus("Cancelled");    progress.setCancelled();    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:    progress.setStatus("Stopped");    break;   default:    progress.setStatus("Unhandled Error: " + error_code);    this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   }  } catch (ex) {         this.debug(ex);     } }  改为 function uploadError(file, errorCode, message) {  try {   var progress = new FileProgress(file, this.customSettings.progressTarget);   progress.setError();   progress.toggleCancel(false);     switch (errorCode) {   case 'uploaderror':    progress.setStatus("上传失败:" + message);//自定义错误提示    this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:    progress.setStatus("Upload Error: " + message);    this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:    progress.setStatus("Configuration Error");    this.debug("Error Code: No backend file, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:    progress.setStatus("Upload Failed.");    this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.IO_ERROR:    progress.setStatus("Server (IO) Error");    this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:    progress.setStatus("Security Error");    this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:    progress.setStatus("Upload limit exceeded.");    this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:    progress.setStatus("File not found.");    this.debug("Error Code: The file was not found, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:    progress.setStatus("Failed Validation.  Upload skipped.");    this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:    if (this.getStats().files_queued === 0) {     document.getElementById(this.customSettings.cancelButtonId).disabled = true;     changeBtnClassName(this.customSettings.cancelButtonId,'btncanceldl');    }    progress.setStatus("Cancelled");    progress.setCancelled();    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:    progress.setStatus("Stopped");    break;   default:    progress.setStatus("Unhandled Error: " + error_code);    this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   }  } catch (ex) {         this.debug(ex);     } }

可以看出只是在switch结构中加了一个分支用处显示上传失败的提示