<div class="btn uploadBtn right">
<form enctype="multipart/form-data">
<span>上传文件</span>
<input class="file J_file" multiple="multiple" name="skin" type="file">
</form>
</div>
/**
* @Author SuZhe
* @DateTime 2019-06-04
* @desc 文件大小格式化单位
* @param {[Number]} size [文件大小]
* @param {[Number]} pointLength [精确度]
* @param {[Array]} units [单位列表]
* @return {[String]} [格式化单位]
*/
function formatFileSize(size, pointLength, units) {
var unit;
units = units || [ 'B', 'K', 'M', 'G' ];
while ( (unit = units.shift()) && size > 1024 ) {
size = size / 1024;
}
return (unit === 'B' ? size : size.toFixed( pointLength === undefined ? 2 : pointLength)) + unit;
}
/**
* @Author SuZhe
* @DateTime 2019-06-03
* @desc 多文件分割上传
* @param {[Object]} op [配置参数]
*/
function UploadFile(op){
this.cont = document.getElementsByClassName(op.ele);
this.upSrc = op.src;
this.stopUpFun = op.stopUp;
this.url = op.url;
this.init();
}
UploadFile.prototype = {
init: function(){
var _this = this;
this.cutSize = 6 * 1024 * 1024;
//up btn event
$(this.cont).on("change", function(e){
_this.upload(e,this);
});
//del
$(document).on('click','.j_default .j_colse',function(){
_this.stopUp(this);
});
},
upload: function(e,context){
var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files,
$that = $(context);
this.index = 0;
this.allFiles = [];
this.proHtml = '';
for (var i = 0, len = files.length; i < len; ++i) {
this.allFiles.push(files[i]);
var file = files[i],
name = file.name,
size = formatFileSize(file.size);
//获取后缀名
var extName = name.substring(name.lastIndexOf(".")).toLowerCase().replace(".","");
this.proHtml += '<li class="clearx j_up_pro j_default"><em class="upFileProgressCont_em left file_'+extName+'"></em>\
<div class="left cont">\
<p class="name defaultname"><span class="left">'+name+'</span><span class="right j_show_size">等待上传...</span><span class="right j_show_upsize"></span></p>\
<p class="name errorname"><span class="left">'+name+'</span><span class="right j_uperr"></span></p>\
<p class="name successname"><span class="left">'+name+'</span><span class="left left1">'+size+'</span><span class="right">上传完成</span></p>\
<div class="pro"><b style="width:0%;"></b></div>\
</div>\
<i class="j_colse right"></i>\
</li>';
}
this.showProgress();
this.sendData();
//重置数据
$that.val('');
},
showProgress: function(){
G.confirm({
"text":'<div>\
<p class="tit">上传文件</p>\
<p class="tipText"><i class="tipIcon"></i>离开此页面会导致上传失败!</p>\
<ul>'+this.proHtml+'</ul>\
</div>',
"pclass": "upFileProgressCont",
"css":{width:646},
"bclass": "none"
});
},
sendData: function(){
var _this = this,
index = this.index,
currentFile = this.allFiles[index];
if(!this.totalSize){
//存储当前文件总大小 防止超时重复读取数据
this.totalSize = formatFileSize(currentFile.size);
//dom节点缓存 当前上传展示DOM、总文件展示DOM、进度条DOM
this.$uppar = $('.j_up_pro').eq(index);
this.$upsize = this.$uppar.find('.j_show_upsize');
this.$size = this.$uppar.find('.j_show_size');
this.$pro = this.$uppar.find('b');
//总文件大小
this.$size.html(this.totalSize);
//切片个数
this.shardCount = Math.ceil(currentFile.size / this.cutSize);
//当前切片标识
this.currentFileCutInde = 1;
//是否需要分片
this.isShard = this.shardCount === 1 ? false : true;
this.currentFileArr = [];
//分片数据优化
if(this.isShard){
for(var i = 0, len = this.shardCount; i < len; i++){
var start = i * this.cutSize;
//最后一片文件小于800kb数据前移
var lastSize = currentFile.size - (i+1)*this.cutSize;
if(lastSize <= 800*1024 && lastSize>0){
var end = currentFile.size;
i++;
this.shardCount--;
}else{
var end = Math.min(currentFile.size, start + this.cutSize);
}
this.currentFileArr.push(currentFile.slice(start, end));
}
}else{
this.currentFileArr.push(currentFile);
}
//进度存储
this.loaded = 0;
this.prevLoaded = 0;
}
//formdata
this.formData = new FormData();
//更新文件片段
this.formData.append('file', this.currentFileArr[this.currentFileCutInde-1]);
this.formData.append('name', currentFile.name);
this.formData.append('size', currentFile.size);
//发起请求
this.upHttp = $.ajax({
url: _this.url+'&isShard='+_this.isShard+'¤t='+_this.currentFileCutInde+'&totalShard='+this.shardCount,
type: "POST",
cache: false,
data: _this.formData,
processData: false,
contentType:false,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function(e) {
_this.prevLoaded = e.loaded + _this.loaded;
var count = Math.floor(_this.prevLoaded/currentFile.size*100)+'%',
proSize = formatFileSize(_this.prevLoaded)+'/';
_this.$upsize.html(proSize);
_this.$pro.width(count);
}, false);
}
return xhr;
},
success: function (result) {
var data = JSON.parse(result);
if(data.code === 10000){
//记录切片上传成功后的fid
_this.delFid = data.data.fid;
//所有切片上传完成
if(_this.shardCount === _this.currentFileCutInde){
_this.$uppar.addClass('finish').removeClass('j_default');
_this.next();
}else{
//进度存储
_this.loaded = _this.prevLoaded;
//切片后移
_this.currentFileCutInde++;
}
}else{
_this.$uppar.addClass('error').removeClass('j_default').find('.j_uperr').html(data.desc);
_this.next();
}
//上传完毕
_this.finish();
},
complete: function(XMLHttpRequest, status){
if(status=='timeout'){
_this.stopUp();
}
}
});
},
stopUp: function(ele){
var $par = ele ? $(ele).parents('li') : false;
if($par && $par.find('.j_show_upsize').html() == ''){
var index = $par.index();
$par.remove();
//删除待上传的文件
this.allFiles.splice(index,1);
}else{
//暂停正在上传的文件
this.upHttp.abort();
//删除已经上传但未上传完毕的文件
if(this.delFid){
if(this.stopUpFun && typeof this.stopUpFun === 'function'){
this.stopUpFun(this.delFid);
}
}
//标识后移
$par.addClass('cancelUp').removeClass('j_default').find('.j_uperr').html('已取消上传');
this.next();
//上传完毕
this.finish();
}
},
next: function(){
//文件后移
this.index++;
//重置标识
this.reset();
},
finish: function(){
//所有文件执行完毕
if(this.index > this.allFiles.length-1){
var len = $('.upFileProgressCont .error').length,
errortip = '';
if(len > 0){
errortip = len+'个文件上传失败,请重新上传!'
}
$('.upFileProgressCont').append('<div class="showresult clearx"><p class="left">上传完成!</p><p class="left errtip">'+errortip+'</p><a href="" class="btn right">确定</a></div>');
this.reset();
return false;
}
//再次请求下方文件
this.sendData();
},
reset: function(){
this.totalSize = null;
this.$uppar = null;
this.$upsize = null;
this.$size = null;
this.$pro = null;
this.shardCount = null;
this.currentFileCutInde = null;
this.loaded = null;
this.prevLoaded = null;
this.upHttp = null;
this.delFid = null;
this.currentFileArr = null;
}
}
var upFiles = new UploadFile({
ele: 'J_file',
url:'uploadfile.php?packetid='+pid+'&dirid='+dirid,
stopUp: function(fid){
$.get('xxx.php?fid='+fid)
}
})
.upFileProgressCont .c{padding: 0;}
.upFileProgressCont .tit{font-size: 14px;line-height: 40px;border-bottom: 1px solid #e5e5e5;}
.upFileProgressCont i{display: inline-block;width: 16px;height: 16px;background: url(../i/fileIcos/upFile.png);vertical-align: middle;}
.upFileProgressCont .tipIcon{background-position-y: -42px;}
.upFileProgressCont .tipText{text-align: left;color: #fe6749;line-height: 28px;background: #fffceb;}
.upFileProgressCont .tipText .tipIcon{margin: 0 5px 0 16px;}
.upFileProgressCont ul{height: 500px;overflow-y: auto;}
.upFileProgressCont li{padding: 15px 0;border-bottom: 1px solid #dddddd;}
.upFileProgressCont li .errorname,.upFileProgressCont li .successname,.upFileProgressCont li.error .name,.upFileProgressCont li.finish .name,.upFileProgressCont li.error .pro,.upFileProgressCont li.finish .pro{display: none;}
.upFileProgressCont li.error .errorname,.upFileProgressCont li.finish .successname{display: block;}
.upFileProgressCont li.error .name,.upFileProgressCont li.finish .name{padding-top: 5px;}
.upFileProgressCont li.error .name .right{color: #ff3333;}
.upFileProgressCont li.error i{background-position-y: -42px;}
.upFileProgressCont li.finish .left1{margin-left: 20px;color: #888888;}
.upFileProgressCont li.finish .name .right{color: #888888;}
.upFileProgressCont li.finish i{background-position-y: -64px;}
.upFileProgressCont li i{margin: 10px 15px 0 0;}
.upFileProgressCont .cont{width: 500px;}
.upFileProgressCont .name{height: 18px;padding-bottom: 5px;}
.upFileProgressCont .name .right{color: #888888;}
.upFileProgressCont .pro{width: 500px;height: 6px;background: #eaeaea;}
.upFileProgressCont .pro b{display: block;height: 6px;background: #5bc169;}
.upFileProgressCont .showresult{height: 52px;position: absolute;left: 1px;bottom: 0;border-top: 1px solid #e5e5e5;background: #fff;z-index: 999;width:100%;line-height: 52px;box-sizing: border-box;padding: 0 20px;}
.upFileProgressCont .showresult .errtip{color: #666;margin-left: 10px;}
.upFileProgressCont .showresult .btn{margin-top: 10px;}
.upFileProgressCont_em{display: block;width: 30px;height: 32px;margin: 0 20px;background: url(../i/fileIcos/file-otherIco.png);}
.doc,.docx,.dotx,.dot,.docm,.dotm,.xps,.mht,.mhtml,.rtf,.xml,.odt{background: url(../i/fileIcos/wordIco.png);}
.xls,.xlsx,.xlsb,.xlsm,.xlst{background: url(../i/fileIcos/elxIco.png);}
.ppt,.pptx{background: url(../i/fileIcos/pptIco.png);}
.pdf{background: url(../i/fileIcos/pdfIco.png);}
.move,.mp4,.avi,.wmv,.f4v,.rm,.rmvb,.wmv,.mid,.mpeg,.mpg,.dat{background: url(../i/fileIcos/videoIco.png);}
.jpg,.jpeg,.png,.gif,.bmp,.jpeg2000{background: url(../i/fileIcos/imageIco.png);}
.rar,.zip{background: url(../i/fileIcos/zipIco.png);}
.upFileProgressCont .txt{background: url(../i/fileIcos/textIco.png);}
.psd{background: url(../i/fileIcos/psdIco.png);}
.psd{background: url(../i/fileIcos/psdIco.png);}
.cda,.mp3,.wav,.ape,.flac,.m4a,.ogg,.amr,.wma,.aac,.aiff,.caf{background: url(../i/fileIcos/audioIco.png);}
.ai{background: url(../i/fileIcos/aiIco.png);}