文件上传插件SWFUpload的使用指南
文件上传插件SWFUpload的使用指南
SWFUpload是一款基于Flash技术的文件上传插件，具备多文件同时上传、文件类型限制、进度条显示等功能。下面将为你详细介绍SWFUpload的使用指南。
步骤一：下载SWFUpload文件
SWFUpload的下载地址为：https://github.com/jacksbox/SWFUpload/releases。通过该链接下载SWFUpload后，解压缩得到以下文件：
swfupload.swfswfupload.jsswfupload_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文件所在的路径。
步骤三：创建上传容器
创建一个<p>元素，作为文件上传的容器，如下所示：
<p id="upload_container"></p>步骤四：配置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具备多文件同时上传、文件类型限制、进度条显示等功能，可以大幅提高文件上传的效率和便利性。