973b4e0b56ce6ed5f41d85d0c3dd42e813e05f9f/web/admin/exts/webuploader-0.1.5#">目录说明

├── Uploader.swf                      # SWF文件，当使用Flash运行时需要引入。
├
├── webuploader.js                    # 完全版本。
├── webuploader.min.js                # min版本
├
├── webuploader.flashonly.js          # 只有Flash实现的版本。
├── webuploader.flashonly.min.js      # min版本
├
├── webuploader.html5only.js          # 只有Html5实现的版本。
├── webuploader.html5only.min.js      # min版本
├
├── webuploader.noimage.js            # 去除图片处理的版本，包括HTML5和FLASH.
├── webuploader.noimage.min.js        # min版本
├
├── webuploader.custom.js             # 自定义打包方案，请查看 Gruntfile.js，满足移动端使用。
└── webuploader.custom.min.js         # min版本

973b4e0b56ce6ed5f41d85d0c3dd42e813e05f9f/web/admin/exts/webuploader-0.1.5#">示例

请把整个 Git 包下载下来放在 php 服务器下，因为默认提供的文件接受是用 php 编写的，打开 examples 页面便能查看示例效果。

webUploader的使用 2019.06.02 20:25:19 字数 261 阅读 2282 webUploader的使用记录

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。 采用大文件分片并发上传，极大的提高了文件上传效率。

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

<!--引入CSS--> <!--引入JS--> html部分 <!--用来存放文件信息--> 选择文件 开始上传 初始化Web Uploader var uploader = WebUploader.create({ auto: true,// 选完文件后，是否自动上传。 swf: './js/webuploader-0.1.5/Uploader.swf',// swf文件路径 server: 'http://receive.com/v1/book/upload',// 文件接收服务端。 dnd: '.upload-container', pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id multiple: true, // 选择多个 chunked: true,// 开起分片上传。 threads: 5, // 上传并发数。允许同时最大上传进程数。 method: 'POST', // 文件上传方式，POST或者GET。 fileSizeLimit: 1024*1024*100*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。 fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。 fileVal:'epub', // [默认值：'file'] 设置文件上传域的name。 }); 添加文件到队列时 uploader.on( 'fileQueued', function( file ) { // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等 console.log(file.ext) // 获取文件的后缀 console.log(file.size) // 获取文件的大小 console.log(file); }); 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { console.log(percentage * 100 + '%'); }); 上传成功时触发的 uploader.on( 'uploadSuccess', function( file,response ) { console.log(file.id+"传输成功"); }); 上传失败时触发的 uploader.on( 'uploadError', function( file ) { console.log(file); console.log(file.id+'upload error') }); 取消上传 $('.upload-list').on('click', '.btn-remove', function(){ // 从文件队列中删除某个文件id file_id = $(this).data('id'); uploader.removeFile(file_id, true); // 从队列中删除 // console.log(uploader.getFiles()) // 队列显示还在 其实已经删除 }); 重试上传，重试指定文件，或者从出错的文件开始重新上传。 $('.upload-list').on('click', '.upload-item__progress span', function(){ uploader.retry($(this).data('file')); }); 上传完成 uploader.on( 'uploadComplete', function( file ) { console.log(uploader.getFiles()); }); 一个简陋的demo webuploader <!--引入CSS--> #upload-container, #upload-list{width: 500px; margin: 0 auto; } #upload-container{cursor: pointer; border-radius: 15px; background: #EEEFFF; height: 200px;} #upload-list{height: 800px; border: 1px solid #EEE; border-radius: 5px; margin-top: 10px; padding: 10px 20px;} #upload-container>span{widows: 100%; text-align: center; color: gray; display: block; padding-top: 15%;} .upload-item{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed gray;} .percentage{height: 5px; background: green;} .btn-delete, .btn-retry{cursor: pointer; color: gray;} .btn-delete:hover{color: orange;} .btn-retry:hover{color: green;} <!--引入JS--> 点击或将文件拖拽至此上传 <!-- 文件名：123 删除 重试 --> 点击上传文件 $('#upload-container').click(function(event) { $("#picker").find('input').click(); }); var uploader = WebUploader.create({ auto: true,// 选完文件后，是否自动上传。 swf: 'https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',// swf文件路径 server: 'http://www.test.com/zyb.php',// 文件接收服务端。 dnd: '#upload-container', pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id multiple: true, // 选择多个 chunked: true,// 开起分片上传。 threads: 5, // 上传并发数。允许同时最大上传进程数。 method: 'POST', // 文件上传方式，POST或者GET。 fileSizeLimit: 1024*1024*100*100, //验证文件总大小是否超出限制, 超出则不允许加入队列。 fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。 fileVal:'upload', // [默认值：'file'] 设置文件上传域的name。 });

uploader.on('fileQueued', function(file) {
    // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
    console.log(file.ext) // 获取文件的后缀
    console.log(file.size) // 获取文件的大小
    console.log(file.name);
    var html = '<div class="upload-item"><span>文件名：'+file.name+'</span><span data-file_id="'+file.id+'" class="btn-delete">删除</span><span data-file_id="'+file.id+'" class="btn-retry">重试</span><div class="percentage '+file.id+'" style="width: 0%;"></div></div>';
    $('#upload-list').append(html);
});

uploader.on('uploadProgress', function(file, percentage) {
    console.log(percentage * 100 + '%');
    var width = $('.upload-item').width();
    $('.'+file.id).width(width*percentage);
});

uploader.on('uploadSuccess', function(file, response) {
    console.log(file.id+"传输成功");
});

uploader.on('uploadError', function(file) {
    console.log(file);
    console.log(file.id+'upload error')
});

$('#upload-list').on('click', '.upload-item .btn-delete', function() {
    // 从文件队列中删除某个文件id
    file_id = $(this).data('file_id');
    // uploader.removeFile(file_id); // 标记文件状态为已取消
    uploader.removeFile(file_id, true); // 从queue中删除
    console.log(uploader.getFiles());
});

$('#upload-list').on('click', '.btn-retry', function() {
    uploader.retry($(this).data('file_id'));
});

uploader.on('uploadComplete', function(file) {
    console.log(uploader.getFiles());
});