超大文件上传 WebUploader 断点续传，分片上传

标签：function 断点续传 file 文件 WebUploader uploader 上传 find

你只需要把这个HTML创建就能用，我这是从网上结合多个写的案例所改

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>-
<script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>
<link href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css" rel="stylesheet">

</head>

//视频上传 start
var $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, // 不压缩image
swf: 'https://cdn.bootcss.com/webuploader/0.1.0/Uploader.swf', // swf文件路径
server: '/upload/bigfile', // 文件接收服务端。
pick: '#picker', // 选择文件的按钮。可选
chunked: true, //是否要分片处理大文件上传
chunkSize: 5 * 1024 * 1024, //分片上传，每片2M，默认是5M
threads: 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>&bscr;' +
'<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>

参考文章：http://blog.ncmem.com/wordpress/2023/11/17/%e8%b6%85%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0-webuploader-%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0%ef%bc%8c%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论

标签：function,断点续传,file,文件,WebUploader,uploader,上传,find
From： https://www.cnblogs.com/songsu/p/17839461.html

超大文件上传 WebUploader 断点续传，分片上传

相关文章

赞助商

阅读排行