百度webUploader大数据断点上传js页面

最新推荐文章于 2024-07-02 03:46:43 发布

宗云

最新推荐文章于 2024-07-02 03:46:43 发布

阅读量863

点赞数 1

分类专栏： javaweb 文章标签： webuploader上传

本文链接：https://blog.csdn.net/weixin_38319092/article/details/80066882

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html页面代码

js页面代码

var state = 'pending'; //初始按钮状态

var oldRate; //如果该文件之前上传过已经上传的进度是多少
var count = 0; //当前正在上传的文件在数组中的下标，一次上传多个文件时使用
var filesArr = new Array(); //文件数组：每当有文件被添加进队列的时候就push到数组中
var map = {}; //key存储文件id，value存储该文件上传过的进度
var fileMd5; //文件唯一标识
var uploader;
/**************初始化上传配置************************/
$(document).ready(function(){
if ( !WebUploader.Uploader.support() ) {
alert( 'Web Uploader 暂不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
throw new Error( 'WebUploader does not support the browser you are using.' );
}
uploader = WebUploader.create({
// swf文件路径
swf : basePath + 'uploader/swf/Uploader.swf',
// 文件接收服务端。
server : basePath + 'webuploadAction/uploader',
pick: {
id: '#picker', //是你要点击上传文件按钮的id
multiple : false //是否可以批量上传
},
duplicate : true, //是否可重复选择同一文件
resize : false, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
chunked : true, //分片处理
hunkSize : 10 * 1024 * 1024, //每片10M
chunkRetry : 3, //如果失败，允许自动重传多少次？
threads : 1, //上传并发数。允许同时最大上传进程数。
disableGlobalDnd : true,// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
prepareNextFile : true, // 上传本分片时预处理下一分片
accept : { //接受什么类型的文件上传
title : 'Files',
extensions : 'txt,xls,xlsx,csv',
mimeTypes : '.txt,.xls,.xlsx,.csv'
},
});
//当有文件添加进来的时候,操作外观
uploader.on('fileQueued', webfileQueued);
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', webuploadProgress);
//上传成功时回调
uploader.on('uploadSuccess', webuploadSuccess);
//上传失败时回调
uploader.on('uploadError', webuploadError);
//上传完成后回调
uploader.on('uploadComplete', webuploadComplete);
// 长传完毕，不管成功失败都会调用该事件，主要用于关闭进度条
uploader.on("uploadFinished", webuploadFinished);
// 插件事件
uploader.on('all', weball);
});
/**************初始化上传配置*********end***************/
/**************初始化上传函数*********start***************/
function webfileQueued(file) {
var $list = $("#thelist");
$list.html("");
filesArr=[];//清空文件数组不需要批量上传
filesArr.push(file);//将选择的文件添加进文件数组
//先检查该文件是否上传过，如果上传过，上传进度是多少
var $div = '<div id="' + file.id + '" class="item" title="'+ file.name +'">' +
'<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" '+
'style="width:1%;"></div></div>' +
'<h5 class="info">' + file.name +'</h5>' +
'<a class="btn btn-defult file_btn btnRemoveFile">删除</a>' +
'<p class="state">等待上传...</p>' +
'</div>'
$.ajax({
url : basePath + "rest/webuploadAction/getProgress",
type : "post",
data : {
name : file.name, //文件名
size : file.size
},
cache : false,
async : false, // 同步
dataType : "json",
success : function(json) {
if (json.data > 0) {//上传过
var data = json.data;
oldRate = data / 100;//上传过的进度的百分比
var rateStyle = "width:" + data + "%";//如果上传过上传了多少
var html = '<div id="' + file.id + '" class="item" title="'+ file.name +'">' +
'<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" '+
'style="' + rateStyle + '"></div></div>' +
'<h5 class="info">' + file.name +'</h5>' +
'<a class="btn btn-defult file_btn btnRemoveFile">删除</a>' +
'<p class="state">已上传' + data + '%</p>' +
'</div>';
$list.append(html);
//将上传过的进度存入map集合
map[file.id] = oldRate;
} else { //没有上传过
$list.append($($div));
}
},
error:function(json){
$list.append($($div));
}
});
$("#uploadBtn").show();//显示上传按钮
$("#picker").hide();//隐藏文件按钮
uploader.stop(true);
//删除队列中的文件
$(".btnRemoveFile").bind("click", function() {
uploader.cancelFile( file );
var fileItem = $(this).parent();
uploader.removeFile($(fileItem).attr("id"), true);
$(fileItem).fadeOut(function() {
$(fileItem).remove();
});
//数组中的文件也要删除
for (var i = 0; i < filesArr.length; i++) {
if (filesArr[i].id == $(fileItem).attr("id")) {
filesArr.splice(i, 1); //i是要删除的元素在数组中的下标，1代表从下标位置开始连续删除一个元素
}
}
$("#uploadBtn").hide();
$("#picker").show();//隐藏文件按钮
});
}

function webuploadProgress(file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
//避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
//将实时进度存入隐藏域
$("#uploader").data("rate", Math.round(percentage * 100));
//根据fielId获得当前要上传的文件的进度
oldRate = map[file.id]
if (percentage < oldRate && oldRate != 1) {
$li.find('p.state').text('上传中' + Math.round(oldRate * 100) + '%');
$percent.css('width', oldRate * 100 + '%');
} else {
$li.find('p.state').text('上传中' + Math.round(percentage * 100) + '%');
$percent.css('width', percentage * 100 + '%');
}
}

function webuploadSuccess(file, response) {
//上传成功去掉进度条
$('#' + file.id).find('.progress').fadeOut();
$(".btnRemoveFile").hide();//隐藏删除按钮
$("#startOrStopBtn").hide();//隐藏上传按钮
if (response.success) {
$('#' + file.id).find('p.state').text(response.msg);
webUploaderFilePath(response.data,file.name);
} else {
$('#' + file.id).find('p.state').text(response.msg);
}
$('#' + file.id).css("top", "0px");
}

function webuploadError(file,reason) {
alert(type)
$('#' + file.id).find('p.state').text('上传出错');
uploader.cancelFile(file);
uploader.removeFile(file, true);
uploader.reset();
}

function webuploadComplete(file) {
$('#' + file.id).find('.progress').fadeOut();
uploader.removeFile(file, true);
}

function webuploadFinished() {
uploader.reset();
$("#uploadBtn").hide();//显示上传按钮
$("#picker").show();//隐藏文件按钮
Read();
}

function weball(type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}
if (state === 'uploading') {
$("#uploadBtn").text('暂停上传');
} else {
$("#uploadBtn").text('开始上传');
}
}
/********************上传的三个时间段（配置）star***************************/
//上传的三个时间段
WebUploader.Uploader.register({
"before-send-file" : "beforeSendFile",
//整个文件上传前
"before-send" : "beforeSend",
//每个分片上传前
"after-send-file" : "afterSendFile",
//分片上传完毕
}, {
beforeSendFile : webbeforeSendFile,
beforeSend : webbeforeSend,
afterSendFile : webafterSendFile
});
/********************大文件上传的三个时间段（三函数）star***************************/
function webbeforeSendFile(file) {
var deferred = WebUploader.Deferred();
//1、计算文件的唯一标记fileMd5，用于断点续传如果.md5File(file)方法里只写一个file参数则计算MD5值会很慢
//所以加了后面的参数：10*1024*1024
(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function(percentage) {
$('#' + file.id).find('p.state').text('正在读取文件信息...');
}).then(function(val) {
$('#' + file.id).find("p.state").text("成功获取文件信息...");
fileMd5 = val;
//获取文件信息后进入下一步
deferred.resolve();
});
return deferred.promise();
}
function webbeforeSend(block) {
var deferred = WebUploader.Deferred();
var url = basePath + "rest/webuploadAction/checkChunks"; // 验证每一个分片是否已经上传了
var rate = $("#uploader").data("rate");
var data = {
name : block.file.name,
rate : rate, //查看当前进度
fileMd5 : fileMd5, //文件唯一标记
chunk : block.chunk, //当前分块下标
size : block.end - block.start //当前分块大小
};
$.ajax({
url : url,
type : "post",
data : data,
cache : false,
async : false,
dataType : "json",
success : function(json) {
if (json.data == 1) {
//分块存在，跳过
deferred.reject();
} else {
//分块不存在或不完整，重新发送该分块内容
deferred.resolve();
}
}
});
this.owner.options.formData.fileMd5 = fileMd5;
deferred.resolve();
return deferred.promise();
}
function webafterSendFile(file) {
var url = basePath + "rest/webuploadAction/mixChunks"; //将所有分片合成整体
var rate = $("#uploader").data("rate");
var data = {
name : file.name,
rate : rate,
};
$.ajax({
url : url,
type : "post",
data : data,
dataType : "json",
async : false,
success : function(json) {
count++; //每上传完成一个文件 count+1
if (count <= filesArr.length - 1) {
uploader.upload(filesArr[count].id); //上传文件列表中的下一个文件
}
webUploaderFilePath(json.data,file.name);
//合并成功之后的操作
},
error:function(json){
$('#' + file.id).find("p.state").text("合成失败");
}
})
}
/********************上传的三个时间段（三函数）end***************************/
//上传检查大文件是否已经上传，
function uploadTest() {
if (state === 'uploading') {
uploader.stop(true);
} else {
//当前上传文件的文件名
var currentFileName;
//当前上传文件的文件id
var currentFileId;
//count=0 说明没开始传默认从文件列表的第一个开始传
if (count == 0) {
currentFileName = filesArr[0].name;
currentFileId = filesArr[0].id;
} else {
if (count <= filesArr.length - 1) {
currentFileName = filesArr[count].name;
currentFileId = filesArr[count].id;
}
}
//先查询该文件是否上传过如果上传过已经上传的进度是多少
$.ajax({
url : basePath + "rest/webuploadAction/getProgress",
type : "post",
data : {
name : currentFileName, //文件名
},
async : false, // 同步
dataType : "json",
success : function(json) {
if (json.success) {
//如果上传过将进度存入map
if (json.data > 0 && json.data != 100) {
map[currentFileId] = json.data / 100;
//执行上传
uploader.upload(currentFileId);
} else if (json.data == 100) {
//上传成功去掉进度条
$('#' + currentFileId).find('.progress').fadeOut();
//隐藏删除按钮
$(".btnRemoveFile").hide();
//隐藏上传按钮
$("#startOrStopBtn").hide();
$('#' + currentFileId).find('p.state').text('文件已上传成功');
$('#' + currentFileId).css("top", "0px");
//隐藏上传按钮
$("#uploadBtn").hide();
//显示文件按钮
$("#picker").show();
count++;
if (count <= filesArr.length - 1) {
uploader.upload(filesArr[count].id); //上传文件列表中的下一个文件
}
webUploaderFilePath(json.msg,currentFileName);
Read();
} else {
uploader.upload(currentFileId);
}
}
},
error : function(json) {
uploader.upload(currentFileId);
}
});
}

}

以上内容有借鉴网上各位大神的代码。如果侵权，请联系作者！