文件上传插件SWFUpload的使用指南

文件上传插件SWFUpload的使用指南

SWFUpload是一款基于Flash技术的文件上传插件，具备多文件同时上传、文件类型限制、进度条显示等功能。下面将为你详细介绍SWFUpload的使用指南。

步骤一：下载SWFUpload文件

SWFUpload的下载地址为：https://github.com/jacksbox/SWFUpload/releases。通过该链接下载SWFUpload后，解压缩得到以下文件：

swfupload.swf
swfupload.js
swfupload_config.js

其中，swfupload.swf是核心文件，负责控制Flash，swfupload.js是对swfupload.swf的封装，提供了便利的API，swfupload_config.js是配置文件，用于配置上传的参数。

步骤二：引入SWFUpload文件

在HTML中引入SWFUpload文件，如下所示：

<script type="text/javascript" src="path/to/swfupload.js"></script>
<script type="text/javascript" src="path/to/swfupload_config.js"></script>

其中，path/to/为SWFUpload文件所在的路径。

步骤三：创建上传容器

创建一个<div>元素，作为文件上传的容器，如下所示：

<div id="upload_container"></div>

步骤四：配置SWFUpload

在swfupload_config.js中配置SWFUpload，如下所示：

var swfupload = new SWFUpload({
    // 上传设置
    upload_url : "upload.php",    // 接收上传文件的URL
    file_post_name : "file",      // 文件上传时的参数名
    post_params : {},             // 附带的POST参数
    file_size_limit : "100 MB",   // 文件大小限制，单位为B、KB、MB、GB或TB
    file_types : "*.jpg;*.png",   // 文件类型限制，多个类型用分号隔开
    file_types_description : "Image Files",   // 文件类型说明
    file_upload_limit : 10,       // 文件上传数量限制
    file_queue_limit : 0,         // 文件队列数量限制，0表示无限制
    // 事件设置
    swfupload_loaded_handler : function() {},  // SWFUpload加载完成后的回调函数
    file_dialog_start_handler : function() {}, // 文件对话框打开前的回调函数
    file_queued_handler : function(file) {},   // 每个文件被添加到队列后触发的回调函数
    file_queue_error_handler : function(file, error, message) {},   // 文件添加到队列时出错的回调函数
    file_dialog_complete_handler : function(numFilesSelected, numFilesQueued) {},  // 文件对话框关闭后的回调函数
    upload_start_handler : function(file) {},  // 文件上传开始时的回调函数
    upload_progress_handler : function(file, bytesLoaded, bytesTotal) {},   // 文件上传进度变化时的回调函数
    upload_error_handler : function(file, error, message) {},    // 文件上传发生错误时的回调函数
    upload_success_handler : function(file, data, response) {}   // 文件上传成功后的回调函数
});

其中，upload_url是接收上传文件的URL，file_post_name是上传文件时的参数名，file_size_limit是文件大小限制，file_types是文件类型限制，file_types_description是文件类型说明，file_upload_limit是文件上传数量限制。事件中，swfupload_loaded_handler是SWFUpload加载完成后的回调函数，file_dialog_start_handler是文件对话框打开前的回调函数，file_queued_handler是每个文件被添加到队列后触发的回调函数，file_queue_error_handler是文件添加到队列时出错的回调函数，file_dialog_complete_handler是文件对话框关闭后的回调函数，upload_start_handler是文件上传开始时的回调函数，upload_progress_handler是文件上传进度变化时的回调函数，upload_error_handler是文件上传发生错误时的回调函数，upload_success_handler是文件上传成功后的回调函数。

步骤五：渲染SWFUpload

在upload_container元素中渲染SWFUpload，如下所示：

swfupload.setButtonImageURL("path/to/browse_button.png");
swfupload.setButtonWidth("100");
swfupload.setButtonHeight("30");
swfupload.setButtonPlaceholder(document.getElementById("upload_container"));

其中，setButtonImageURL设置选择文件按钮的图片地址，setButtonWidth设置选择文件按钮的宽度，setButtonHeight设置选择文件按钮的高度，setButtonPlaceholder将选择文件按钮渲染到upload_container元素中。

示例一：实现单文件上传

var swfupload = new SWFUpload({
    // 上传设置
    upload_url : "upload.php",    // 接收上传文件的URL
    file_post_name : "file",      // 文件上传时的参数名
    // 事件设置
    file_queued_handler : function(file) {
        // 清空队列中的所有文件
        this.cancelUpload(file.id, true);
        // 开始上传文件
        this.startUpload();
    },
    upload_start_handler : function(file) {
        // 在控制台中输出文件名
        console.log("开始上传文件：" + file.name);
    },
    upload_success_handler : function(file, data, response) {
        // 在控制台中输出上传结果
        console.log("上传文件：" + file.name + "，结果：" + response);
    }
});

以上代码实现了单文件上传。在文件添加到队列后，将清空队列中的所有文件，并开始上传文件。在文件上传开始时，在控制台中输出文件名。在文件上传成功后，在控制台中输出上传结果。

示例二：实现多文件上传

var swfupload = new SWFUpload({
    // 上传设置
    upload_url : "upload.php",    // 接收上传文件的URL
    file_post_name : "file",      // 文件上传时的参数名
    file_upload_limit : 2,        // 文件上传数量限制
    // 事件设置
    file_dialog_complete_handler : function(numFilesSelected, numFilesQueued) {
        if (numFilesSelected > this.settings.file_upload_limit) {
            // 如果选择文件数量超过上传数量限制，则提示用户
            alert("选择文件数量不能超过" + this.settings.file_upload_limit + "个");
            // 取消所有文件的上传
            this.cancelUpload(null, false);
        } else {
            // 开始上传文件
            this.startUpload();
        }
    },
    upload_start_handler : function(file) {
        // 在控制台中输出文件名
        console.log("开始上传文件：" + file.name);
    },
    upload_success_handler : function(file, data, response) {
        // 在控制台中输出上传结果
        console.log("上传文件：" + file.name + "，结果：" + response);
    }
});

以上代码实现了多文件上传。在文件对话框关闭后，如果选择文件数量超过上传数量限制，则提示用户，并取消所有文件的上传。否则，开始上传文件。在文件上传开始时，在控制台中输出文件名。在文件上传成功后，在控制台中输出上传结果。

结语

通过以上步骤，就可以轻松地使用SWFUpload实现文件上传功能了。SWFUpload具备多文件同时上传、文件类型限制、进度条显示等功能，可以大幅提高文件上传的效率和便利性。