Web Uploader文件上传插件使用详解

Web Uploader文件上传插件使用攻略

Web Uploader是一款基于HTML5的文件上传插件，可以通过它来实现文件上传功能。下面将介绍Web Uploader的使用方法和相关示例。

一、环境准备

首先，需要在web页面中引入Web Uploader的相关js和css文件，以及Jquery库。可以通过CDN引入，也可以下载到本地使用。

<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/webuploader/0.1.5/webuploader.css">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/webuploader/0.1.5/webuploader.min.js"></script>

二、基本用法

Web Uploader的基本用法非常简单，只需要在html页面放置一个dom元素，然后通过js代码初始化即可。下面是一个简单的例子：

<!--放置一个dom元素-->
<div id="uploader"></div>

<script type="text/javascript">
// 初始化Web Uploader
var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。
    auto: true,

    // swf文件路径
    swf: '/path/to/Uploader.swf',

    // 文件接收服务端。
    server: '/upload.php'
});
</script>

在上面的代码中，将一个div元素设置id为“uploader”，然后通过WebUploader.create方法初始化uploader实例。其中，auto表示是否自动上传，swf表示Flash文件的路径，server表示文件接收的服务端地址。

三、事件监听

Web Uploader提供了多个事件，可以实现对文件上传过程的控制。下面是一些常用的事件：

• fileQueued：当文件被加入队列之前触发。
• uploadProgress：上传过程中触发，携带上传进度。
• uploadSuccess：当文件上传成功时触发。
• uploadError：当文件上传出错时触发。
• uploadComplete：不管成功或者失败，文件上传完成时触发。

下面是一个示例代码：

<div id="uploader"></div>

<script type="text/javascript">
// 初始化Web Uploader
var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。
    auto: true,

    // swf文件路径
    swf: '/path/to/Uploader.swf',

    // 文件接收服务端。
    server: '/upload.php',

    // 事件监听
    listeners: {
        'fileQueued': function(file) {
            console.log('文件已经被加入队列！');
        },
        'uploadProgress': function(file, percentage) {
            console.log('上传进度：' + percentage);
        },
        'uploadSuccess': function(file, response) {
            console.log('上传成功！');
        },
        'uploadError': function(file) {
            console.log('上传出错！');
        },
        'uploadComplete': function(file) {
            console.log('上传完成！');
        }
    }
});
</script>

四、多文件上传

Web Uploader支持多文件上传功能，只需要将多个文件加入队列即可实现。下面是一个示例代码：

<div id="uploader"></div>

<script type="text/javascript">
// 初始化Web Uploader
var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。
    auto: true,

    // swf文件路径
    swf: '/path/to/Uploader.swf',

    // 文件接收服务端。
    server: '/upload.php'
});

// 当有文件被添加进队列的时候
uploader.on('fileQueued', function(file) {
    var $list = $('#thelist');
    $list.append('<div id="' + file.id + '">' +
        file.name + '</div>');
});

// 文件上传成功，给item添加成功class, 标记上传成功。
uploader.on('uploadSuccess', function(file) {
    $('#' + file.id).addClass('success');
});
</script>

在上面的代码中，通过添加多个div元素实现将多个文件加入队列。上传成功后的文件将会添加success类。

五、总结

至此，Web Uploader文件上传插件的详解就结束了。Web Uploader的使用非常方便，只需要几行代码就可以实现文件上传功能。如果需要深入了解Web Uploader，可以参考官方文档进行学习。