分片上传—webloader

爱被打了一巴掌 2023-10-11 20:08 44阅读 0赞

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

## 1.引入资源 ##

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

所以我们需要先下载下来，[点击此处下载][Link 1]

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

![在这里插入图片描述][09f21db698444200bbde3080da333192.png_pic_center]

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

*  webuploader.css
 *  webuploader.min.js
 *  Uploader.swf

![在这里插入图片描述][d6b24156738e4aabb725afdbcf9c4deb.png_pic_center]

![在这里插入图片描述][5e1e853eeee74feebe949265710adc93.png_pic_center]

页面引入

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

## 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');
            });

最终效果如下：  
![在这里插入图片描述][f9440d3cafce472998ef17a11558708e.png_pic_center]

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

--------------------