flashupload 参数

Flash 技术早已被淘汰，主流浏览器（如 Chrome、Firefox、Edge、Safari）已经默认禁用了 Flash 插件。flashupload 这个组件在现代 Web 开发中几乎不再使用。

为了知识完整性，或者如果您在维护一个非常老旧的项目,下面我将详细解释其工作原理和核心参数。

flashupload 是什么？

flashupload 通常是一个基于 Adobe Flash 技术开发的文件上传组件，它的主要优势（在当年）是：

1. 多文件上传：可以一次性选择多个文件进行上传，而无需使用 HTML4 <input type="file"> 的重复。
2. 上传进度显示：可以实时显示每个文件的上传进度条。
3. 拖拽上传：支持将文件拖拽到上传区域进行上传。
4. 更好的样式控制：开发者可以自定义上传按钮和界面的外观,而不受浏览器原生控件的限制。

核心工作原理

flashupload 的工作流程通常如下：

1. 嵌入 Flash：在 HTML 页面中，使用 <object> 或 <embed> 标签将一个 SWF 文件（Flash 程序）嵌入到页面的指定位置。
2. JavaScript 通信：页面上的 JavaScript 代码通过 ExternalInterface API 与这个 SWF 文件进行通信。
   • 调用 Flash：JS 可以调用 Flash 内部定义的函数，browse()（打开文件选择对话框）、upload()（开始上传）、clear()（清空列表）。
   • Flash 回调 JS：Flash 在执行过程中（如文件选择完成、上传进度、上传成功或失败）会调用 JS 中预先定义好的回调函数，并将数据（如文件名、大小、进度百分比）传递给 JS。
3. 后端交互：Flash 内部使用 FileReference.upload() 方法将文件数据通过 HTTP POST 请求发送到服务器指定的 URL。

主要参数解析

参数通常分为两部分：SWF 文件初始化参数 和 JavaScript 接口参数。

SWF 初始化参数

这些参数是在嵌入 SWF 时传递给 Flash 程序的，通常定义了 Flash 的基本行为。

JavaScript 接口参数与方法

这些是你在页面上通过 JavaScript 调用和控制 Flash 组件的方法。

初始化方法

通常在页面加载完成后,调用一个初始化函数来设置好所有回调。

function initUploader() {
    // 假设 Flash 的 ID 是 "myFlashUpload"
    var uploader = document.getElementById("myFlashUpload");
    // 设置回调函数
    uploader.queue_complete_handler = "onAllUploadsComplete";
    uploader.upload_progress_handler = "onUploadProgress";
    uploader.upload_error_handler = "onUploadError";
    uploader.upload_success_handler = "onUploadSuccess";
}

核心控制方法

回调函数

这些函数由 Flash 在特定事件触发时调用,你需要在全局作用域中定义它们。

// 当单个文件上传成功时被调用
// event: 包含 file, serverData, 等
function onUploadSuccess(event) {
    console.log("文件 " + event.file.name + " 上传成功!");
    console.log("服务器返回: " + event.serverData);
    // 可以在这里更新页面，比如显示缩略图
}
// 当单个文件上传进度更新时被调用
// event: 包含 file, loaded, total, percent
function onUploadProgress(event) {
    var percent = Math.round(event.percent);
    console.log("文件 " + event.file.name + " 上传进度: " + percent + "%");
    // 可以在这里更新进度条
}
// 当单个文件上传失败时被调用
// event: 包含 file, errorCode, message
function onUploadError(event) {
    console.error("文件 " + event.file.name + " 上传失败: " + event.message);
}
// 当队列中所有文件都上传完成时被调用
function onAllUploadsComplete() {
    console.log("所有文件上传完毕!");
}

现代替代方案

由于 Flash 已死，现代 Web 开发中应使用以下技术替代 flashupload：

1. HTML5 File API：这是最核心的替代方案。

   • <input type="file" multiple>：原生支持多文件选择。
   • FileReader API：用于读取文件内容（如预览图片）。
   • FormData 对象：用于将文件和表单数据打包，通过 XMLHttpRequest 或 fetch 发送到服务器。
   • XMLHttpRequest.upload.onprogress：可以方便地监听上传进度。

2. 成熟的 JavaScript 上传库：这些库封装了复杂的细节,提供了更强大的功能。

   • Plupload：一个非常经典和强大的多运行时上传器，支持 HTML5, Flash, Silverlight, Gears 等作为“运行时”，可以优雅地降级，即使现在,它也是一个很好的选择。
   • Dropzone.js：专注于拖拽上传，非常易用,开箱即用。
   • Uploadify：一个基于 jQuery 的上传组件，功能丰富,有免费和商业版本。
   • tus.io：一个基于 HTTP 的、可恢复的、开源的文件上传协议,特别适合大文件上传。

如果您正在开发新项目，请务必选择现代的 HTML5 + JavaScript 库方案，如果您在维护旧项目,可以考虑将其逐步迁移到新的技术栈上。