文件上传利器SWFUpload入门简易教程

SWFUpload是一款用于网站集成文件上传功能的插件，在众多的文件上传插件中，它的使用率非常高。本文将为大家介绍SWFUpload的基本概念、使用方法以及实际应用案例。

一、SWFUpload基本概念

SWFUpload是一款基于flash技术的文件上传组件，它的主要特点如下：

1.多文件上传：支持同时上传多个文件。

2.平台兼容：既支持Windows系统，又支持Mac系统。

3.上传进度条：可以显示上传过程的进度条。

4.自由度高：支持自定义样式，可以应用到不同的网站中。

二、SWFUpload使用方法

1.下载SWFUpload插件

SWFUpload官网：http://swfupload.org/

2.引用SWFUpload的文件

使用SWFUpload需要引用如下文件：

swfupload.js：处理上传流程的JavaScript文件。

plugins/swfupload.swf：上传组件所用的Adobe Flash文件。

3.配置SWFUpload

具体配置方法如下所示：

var swfu = new SWFUpload({

post_params: {...},

upload_url: "...",

flash_url: "...",

file_size_limit: "...",

file_types: "..."

});

其中，参数post_params是要上传的其他数据（例如用户ID等）；upload_url是上传文件的地址；flash_url是SWFUpload组件的路径；file_size_limit是上传文件大小的限制；file_types是允许上传的文件类型。

4.设置上传进度条

上传进度条是SWFUpload的一个特点。可以使用SWFUpload提供的回调函数来设置进度条：

swfu.uploadProgress = function(file, bytesLoaded, bytesTotal) {

var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);

document.getElementById(file.id).getElementsByTagName("span")[0].innerHTML = percent + "%"; //在HTML中显示上传进度百分比

};

其中，function(file, bytesLoaded, bytesTotal)是回调函数，用来获取上传文件、已加载文件的大小、总文件的大小等信息。percent是计算上传百分比的结果，最后在HTML中显示。

三、SWFUpload实际应用案例

1.在论坛中添加附件上传功能

在论坛中，用户可以发布帖子并上传图像或文件。以下是使用SWFUpload完成论坛文件上传功能的一个示例：

(1)在网站的Html中加入如下代码：

(2)在论坛网页的Javascript中引用SWFUpload文件并初始化：

(3)使用SWFUpload提供的回调函数来设置进度条、显示上传文件列表、上传成功后的处理等：

/**

* 组件加载完成时的回调函数

*/

function swfupload_loaded() {

$('#upload_btn').click(function () {

if (swf_upload.getStats().files_queued != 0) {

swf_upload.startUpload();

} else {

alert('请选择要上传的文件');

}

});

}

/**

* 添加文件时的回调函数

*/

function file_add(file) {

var $li = $('

$('#attach_list').append($li);

}

/**

* 文件上传进度的回调函数

*/

function upload_progress(file, bytes_loaded, bytes_total) {

var percent = Math.ceil((bytes_loaded / bytes_total) * 100);

$('#'+file.id).children('span').text(percent + '%');

}

/**

* 文件上传成功的回调函数

*/

function upload_success(file, response) {

$('#'+file.id).append('下载'); //将文件上传后的下载链接添加到上传文件列表中

}

/**

* 文件上传失败的回调函数

*/

function upload_error(file, response) {

$('#'+file.id).append('上传失败');

}

2.在网站中添加鲜花和小贴纸的上传功能

在网站中，为了使用户能够发送带鲜花和小贴纸的信息，需要添加上传鲜花和小贴纸的功能。以下是使用SWFUpload完成鲜花和小贴纸上传功能的一个示例：

(1)在网站中加入如下代码：

(2)在网页的Javascript中引用SWFUpload文件并初始化：

下面是鲜花上传文件部分的代码：

var swf_upload = new SWFUpload({

upload_url: "/upload/flower",

flash_url: "/swfupload/swfupload.swf",

file_size_limit: "2 MB",

file_types: "*.jpg;*.png;*.gif",

button_placeholder_id: "flower_upload",

file_queued_handler: file_queued, //当选择文件后的回调函数

file_queue_error_handler: file_queue_error, //文件上传队列有误时的回调函数

upload_progress_handler: upload_progress, //文件上传进度的回调函数

upload_success_handler: upload_success, //文件上传成功的回调函数

upload_error_handler: upload_error, //上传文件出错时的回调函数

});

下面是小贴纸上传文件部分的代码：

var swf_upload = new SWFUpload({

upload_url: "/upload/sticker",

flash_url: "/swfupload/swfupload.swf",

file_size_limit: "1 MB",

file_types: "*.png",

button_placeholder_id: "sticker_upload",

file_queued_handler: file_queued, //当选择文件后的回调函数

file_queue_error_handler: file_queue_error, //文件上传队列有误时的回调函数

upload_progress_handler: upload_progress, //文件上传进度的回调函数

upload_success_handler: upload_success, //文件上传成功的回调函数

upload_error_handler: upload_error, //上传文件出错时的回调函数

});

(3)使用SWFUpload提供的回调函数来设置上传进度条、上传成功后的处理等：

/**

* 当选择文件后的回调函数

*/

function file_queued(file) {

$progress = $('

$('.flower_upload').parent().append($progress);

}

/**

* 文件上传进度的回调函数

*/

function upload_progress(file, bytes_loaded, bytes_total) {

for (var i=0; i<$(".flower_upload").length; i++) {

if ($("#"+file.id).next(".flower_upload").attr("id") == $(".flower_upload").eq(i).attr("id")) {

var percent = Math.ceil((bytes_loaded/bytes_total) * 100);

$(".progress").eq(i).html(percent + "%");

}

}

}

/**

* 文件上传成功的回调函数

*/

function upload_success(file, response) {

$("#"+file.id).parent().children('.upload_complete').html('上传成功');

}

/**

* 文件上传失败的回调函数

*/

function upload_error(file, response) {

for (var i=0; i<$(".flower_upload").length; i++) {

if ($("#"+file.id).next(".flower_upload").attr("id") == $(".flower_upload").eq(i).attr("id")) {

$(".progress").eq(i).html("上传失败");

}

}

}

四、结语

本文介绍了SWFUpload的基本概念、使用方法以及实际应用案例。通过本文的学习，读者不仅可以掌握SWFUpload的基本使用方法，也可以根据实际需求自由运用该组件，为网站添加上传功能的同时提升用户体验。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/