分片上传—webloader

最近研究大文件上传方案的时候偶然间发现的一个百度开源的工具：webloader，用了一下，确实还不错，下面带着大家一起使用一下。

1.引入资源

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

所以我们需要先下载下来，点击此处下载

如果不想下载也没关系，文末有源代码地址，可以将这个项目下载下来，而且前后端都是独立的，所以也无需多虑。

然后找到我们所需要的三个文件，放到相应的目录

• webuploader.css
• webuploader.min.js
• Uploader.swf

页面引入

<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<script type="text/javascript" src="js/webuploader.min.js"></script>

为了提升阅读体验，本文只贴出核心代码，完整代码可以自行到文末下载。

Html部分

首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。

  <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择大文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>

初始化Web Uploader

具体说明，请看一下代码中的注释部分。

 // 实例化
        var uploader = WebUploader.create({
            pick: {
                id: '#picker',
                label: '点击选择文件'
            },
            formData: {
                uid: 0,
                md5: '',
                chunkSize: chunkSize
            },
            //dnd: '#dndArea',
            //paste: '#uploader',
            swf: 'js/Uploader.swf',
            chunked: true,
            chunkSize: chunkSize, // 字节 1M分块
            threads: 3,
            server: 'index/fileUpload',
            auto: false,

            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 1024,
            fileSizeLimit: 1024 * 1024 * 1024, // 200 M
            fileSingleSizeLimit: 1024 * 1024 * 1024 // 50 M
        });

显示用户选择

由于webuploader不处理UI逻辑，所以需要去监听fileQueued事件来实现。

// 当有文件被添加进队列的时候
        uploader.on('fileQueued', function(file) {
            console.log("fileQueued");
            $thelist.append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
        });

文件上传进度

文件上传中，Web Uploader会对外派送uploadProgress事件，其中包含文件对象和该文件当前上传进度。

uploader.on('uploadProgress', function(file, percentage) {
            getProgressBar(file, percentage, "FILE", "上传进度");
        });

文件成功、失败处理

文件上传失败会派送uploadError事件，成功则派送uploadSuccess事件。不管成功或者失败，在文件上传完后都会触发uploadComplete事件。

  // 上传返回结果
        uploader.on('uploadSuccess', function(file) {
            var text = '已上传';
            if (file.pass) {
                text = "文件妙传功能，文件已上传。"
            }
            $('#' + file.id).find('p.state').text(text);
        });
        uploader.on('uploadError', function(file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });
        uploader.on('uploadComplete', function(file) {
            // 隐藏进度条
            // fadeOutProgress(file, 'MD5');
            // fadeOutProgress(file, 'FILE');
        });

最终效果如下：

项目git地址：https://gitee.com/ninesuntec/large-file-upload/tree/master/font

---

相关文章推荐：

• 《Spring Boot超大文件上传，实现秒传》