你只需要把这个HTML创建就能用，我这是从网上结合多个写的案例所改
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文件上传</title><script src="/jquery-3.4.1.slim.min.js"integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="crossorigin="anonymous"></script>-<script src="/webuploader/0.1.0/webuploader.js"></script><link href="/webuploader/0.1.1/webuploader.css" rel="stylesheet"></head><body><div id="uploadfile"><div id="picker"><button id="bottom-ok">选择文件</button></div><!--用来存放文件信息--><div id="thelist" class="uploader-list"><table class="table" border="1" cellpadding="0" cellspacing="0" width="100%"><tr class="filelist-head"><th width="5%" class="file-num">序号</th><th class="file-name">视频名称</th><th class="file-size">大小</th><th width="20%" class="file-pro">进度</th><th class="file-status">状态</th><th width="20%" class="file-manage">操作</th></tr></table></div><div id="ctlBtn" class="btn btn-default"><button>开始上传</button></div></div><script>$(function () {//视频上传 startvar $list = $('#thelist .table'),$btn = $('#ctlBtn');WebUploader.Uploader.register({'before-send': 'beforesend',}, {beforesend: function(block) {var deferred = WebUploader.Deferred();// 模拟一次异步操作。$.ajax({type: "POST",url: '/upload/exitsChunks',data: {name: block.file.name,chunks: block.chunks,chunk: block.chunk,size: block.end-block.start,},dataType: 'json',async: false, // 同步success: function (data) {if (data == 1) {deferred.reject();} else {deferred.resolve();}},});return deferred.promise();}});var uploader = WebUploader.create({resize: false, // 不压缩imageswf: '/webuploader/0.1.0/Uploader.swf', // swf文件路径server: '/upload/bigfile', // 文件接收服务端。pick: '#picker', // 选择文件的按钮。可选chunked: true, //是否要分片处理大文件上传chunkSize: 5 * 1024 * 1024, //分片上传，每片2M，默认是5Mthreads: 3, // 线程访问数// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。disableGlobalDnd: true,// auto: true, //选择文件后是否自动上传// chunkRetry: 0, //如果某个分片由于网络问题出错，允许自动重传次数// runtimeOrder: 'html5,flash',// accept: {// title: 'Images',// extensions: 'gif,jpg,jpeg,bmp,png',// mimeTypes: 'image/*'// }duplicate: false //是否支持重复上传});// 当有文件被添加进队列的时候-md5序列化uploader.on('fileQueued', function (file) {$list.append('<tr id="' + file.id + '" class="file-item">' +'<td width="5%" class="file-num">1</td>' + '<td class="file-name">' + file.name+ '</td>' + '<td width="20%" class="file-size">' + (file.size / 1024 / 1024).toFixed(2)+ 'M' + '</td>' + '<td width="20%" class="file-pro">0%</td>' + '<td class="file-status">等待上传</td>'+ '<td width="20%" class="file-manage"><a class="stop-btn" href="javascript:;">暂停</a>𝒷' +'<a class="remove-this" href="javascript:;">取消</a></td>' + '</tr>');//暂停上传的文件$list.on('click', '.stop-btn', function () {uploader.stop(true);});//删除上传的文件$list.on('click', '.remove-this', function () {if ($(this).parents(".file-item").attr('id') == file.id) {uploader.removeFile(file);$(this).parents(".file-item").remove();}});});uploader.on('uploadBeforeSend', function (block, data) {var file = block.file;data.md5value = file.wholeMd5;data.status = file.status;});//重复添加文件var timer1;uploader.onError = function (code) {clearTimeout(timer1);timer1 = setTimeout(function () {layer.msg('该文件已存在');alert("该文件已存在");}, 250);};// 文件上传过程中创建进度条实时显示uploader.on('uploadProgress', function (file, percentage) {$("td.file-pro").text("");var $li = $('#' + file.id).find('.file-pro'),$percent = $li.find('.file-progress .progress-bar');// 避免重复创建if (!$percent.length) {$percent = $('<div class="file-progress progress-striped active">' +'<div class="progress-bar" role="progressbar" style="width: 100%">' +'</div>' +'</div>' + '<br/><div class="per">0%</div>').appendTo($li).find('.progress-bar');}$li.siblings('.file-status').text('上传中');$li.find('.per').text((percentage * 100).toFixed(2) + '%');$percent.css('width', percentage * 100 + '%');});// 文件上传成功uploader.on('uploadSuccess', function (file) {$('#' + file.id).find('.file-status').text('已上传');$('#' + file.id).find('.file-pro').text('100%');});// 文件上传失败，显示上传出错uploader.on('uploadError', function (file) {$('#' + file.id).find('.file-status').text('上传出错');});// 完成上传完后将视频添加到视频列表，显示状态为：转码中uploader.on('uploadComplete', function (file) {$('#' + file.id).find('.file-progress').fadeOut();});$btn.on('click', function (data) {if ($(this).hasClass('disabled')) {return false;}uploader.upload();});});</script></body></html>
