基于WebUploader的文件上传js插件

这里是关于基于WebUploader的文件上传js插件的完整攻略，包括安装、配置和示例的详细讲解。

安装

WebUploader是一个基于HTML5的文件上传插件，支持分片上传、大文件上传等功能。在使用WebUploader之前，我们需要引入jQuery库并下载WebUploader插件。

在HTML文件中引入jQuery及WebUploader插件。示例代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>WebUploader示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.css">
</head>
<body>
    <div id="uploader-demo">
        <div id="filePicker">选择文件</div>
        <div id="fileList"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script>
</body>
</html>

配置

在引入WebUploader插件后，我们需要对WebUploader进行一些简单的配置。

创建WebUploader对象，示例代码如下：

var uploader = WebUploader.create({
    // swf文件路径
    swf: '/path/to/Uploader.swf',

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

    // 上传文件大小限制，单位：B，默认5GB
    fileSingleSizeLimit: 5 * 1024 * 1024 * 1024,

    // 上传文件个数限制，默认无限制
    fileNumLimit: 10,

    /* 上传并发数限制，默认3 */
    threads: 3,

    /* 是否分片上传，默认true */
    chunked: true,

    /* 分片大小，默认5M */
    chunkSize: 5 * 1024 * 1024,

    // 自动上传。
    auto: true,

    // LIST容器
    container: '#uploader-demo',

    // 允许重复上传相同文件
    duplicate: true,

    // 指定接受类型，例如：image/*,application/pdf
    accept: null,

    // 是否禁用。
    disableGlobalDnd: false,

    // 文件列表容器。
    fileNumLimit: 10,

    // 名称，可以用作类名前缀。
    baseClass: 'webuploader',

    // 上传组件ID，默认为uploader。
    id: 'uploader',

    // 可以用来服务器上传其他参数
    formData: {},

    // 是否禁用multipart/form-data上传。
    disableMultipart: false,

    // 内部使用的名称，用于创建Input元素。
    name: 'file',

    // 是否禁用选择文件。
    pick: {
        id: '#filePicker',
        multiple: true,
        label: '点击选择文件'
    },

    // 设置上传文件的头信息，默认为空。
    headers: {},

    // 当文件上传出错时触发。
    onError: function (file, code) {}
});

示例

下面展示两个基于WebUploader的文件上传示例：

上传单个文件

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>WebUploader示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.css">
</head>
<body>
    <div id="uploader-demo">
        <div id="filePicker">选择文件</div>
        <div id="fileList"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script>
    <script>
        var uploader = WebUploader.create({
            swf: '/path/to/Uploader.swf',
            server: 'http://yourdomain.com/upload.php',
            fileSingleSizeLimit: 5 * 1024 * 1024 * 1024,
            threads: 3,
            auto: true,
            container: '#uploader-demo',
            accept: null,
            pick: {
                id: '#filePicker',
                multiple: false,
                label: '点击选择文件'
            },
            onError: function (file, code) {console.log(code);}
        });

        uploader.on('fileQueued', function(file) {
            console.log(file);
            $('#fileList').append('<div id="' + file.id + '">' +
                                '<h4 class="info">' + file.name + '</h4>' +
                                '<p class="state">等待上传...</p>' +
                            '</div>');
        });

        uploader.on('uploadProgress', function(file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadSuccess', function(file) {
            $('#' + file.id).find('.state').text('已上传');
        });

        uploader.on('uploadError', function(file) {
            $('#' + file.id).find('.state').text('上传出错');
        });

        uploader.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
    </script>
</body>
</html>

上传多个文件

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>WebUploader示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.css">
</head>
<body>
    <div id="uploader-demo">
        <div id="filePicker">选择文件</div>
        <div id="fileList"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script>
    <script>
        var uploader = WebUploader.create({
            swf: '/path/to/Uploader.swf',
            server: 'http://yourdomain.com/upload.php',
            fileSingleSizeLimit: 5 * 1024 * 1024 * 1024,
            threads: 3,
            auto: true,
            container: '#uploader-demo',
            accept: null,
            pick: {
                id: '#filePicker',
                multiple: true,
                label: '点击选择文件'
            },
            onError: function (file, code) {console.log(code);}
        });

        uploader.on('fileQueued', function(file) {
            console.log(file);
            $('#fileList').append('<div id="' + file.id + '">' +
                                '<h4 class="info">' + file.name + '</h4>' +
                                '<p class="state">等待上传...</p>' +
                            '</div>');
        });

        uploader.on('uploadProgress', function(file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadSuccess', function(file) {
            $('#' + file.id).find('.state').text('已上传');
        });

        uploader.on('uploadError', function(file) {
            $('#' + file.id).find('.state').text('上传出错');
        });

        uploader.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
    </script>
</body>
</html>

这两个示例展示了如何使用WebUploader实现单个文件和多个文件上传功能。需要注意的是，示例中的server和swf参数需要根据实际情况修改，具体路径需要自己配置。

希望这篇攻略能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于WebUploader的文件上传js插件 - Python技术站

基于WebUploader的文件上传js插件

安装

配置

示例

上传单个文件

上传多个文件

相关文章