整合WebUploader带进度,md5验证秒传

分享 未结 置顶 精帖
20 2818
Stream
悬赏:20飞吻
先来个图



这里说的是layuiAdmin专业版的正确姿势!!!,其余根据情况自行修改哈!!!!!!
这里说的是layuiAdmin专业版的正确姿势!!!,其余根据情况自行修改哈!!!!!!
这里说的是layuiAdmin专业版的正确姿势!!!,其余根据情况自行修改哈!!!!!!

1.在WebUploader.js中的源文件添加
2.专业版extend目录下添加一个uploader.js
3.在配置config.js中的extend下添加'uploader',这样在需要使用的位置直接 layui.use['uploader']即可


uploader.js如下
layui.extend({
//你的webuploader.js路径
webuploader: 'lib/extend/uploader/webuploader'
}).define(['layer','laytpl','table','element','webuploader'],function(exports){
var $ = layui.$
//webuploader 是webuploader.js中新增exports('xxxx', makeExport(layui.jquery));中xxxx的名称
,webUploader= layui.webuploader
,element = layui.element
,layer=layui.layer
,table=layui.table
,rowData=[]//保存上传文件属性集合,添加table用
,fileSize=100*1024*1024//默认上传文件大小
,uplaod;
//加载样式
layui.link('src/lib/extend/uploader/webuploader.css');

var Class = function (options) {
var that = this;
that.options=options;
console.log(that.options)
that.register();
that.init();
that.events();
};

Class.prototype.init=function(){
var that = this,
options=that.options;
if(options.size){
fileSize=options.size
}
layer.open({
type: 1,
area: ['850px', '500px'], //宽高
content:
'<div id="extend-upload-chooseFile" style="float: left;margin-left: 5px;margin-top: 5px;">选择文件</div>'+
'<button id="extent-button-uploader" class="layui-btn" style="height: 37px;margin-top: 5px;margin-left: 5px;">开始上传</button>'+
'<table style="margin-top:-10px; " class="layui-table" id="extend-uploader-form" lay-filter="extend-uploader-form"></table>'+
'<script type="text/html" id="button-form-uploadTalbe">'+
'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'+
'</script>',
success: function(layero, index){
table.render({
elem: '#extend-uploader-form'
,url: ''
,cols: [[
{type: 'numbers', fixed: 'left'}
,{field: 'fileName', width: 150, title: '文件名称'}
,{field: 'fileSize', width: 100, title: '文件大小'}
,{field: 'validateMd5', title: '文件验证', width: 100, align: 'center'}
,{field: 'progress', width: 200, title: '进度',templet:function (d) {
return '<div style="margin-top: 5px;" class="layui-progress layui-progress-big" lay-filter="'+d.fileId+'" lay-showPercent="true">'+
'<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>'+
'</div>'
}}
,{field: 'oper', width: 100, title: '操作',toolbar:'#button-form-uploadTalbe'}
]]
});

uplaod = webUploader.create({
// 不压缩image
resize: false,
// swf文件路径
swf: 'src/lib/extend/uploader/Uploader.swf',
// 默认文件接收服务端。
server: options.url,
pick: '#extend-upload-chooseFile',
fileSingleSizeLimit:fileSize,//单个文件大小
//接收文件类型--自行添加options
accept:[{
title: 'file',
extensions: 'doc,docx,pdf,xls,xlsx,ppt,pptx,gif,jpg,jpeg,bmp,png,rar,zip',
mimeTypes: '.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.gif,.jpg,.jpeg,.bmp,.png,.rar,.zip'
}]
});
}//可以自行添加按钮关闭,关闭请清空rowData
,end:function () {
rowData=[];
if(options.success){
if(typeof options.success==='function') {
options.success();
}
}
}
});
};
Class.prototype.formatFileSize=function(size){
var fileSize =0;
if(size/1024>1024){
var len = size/1024/1024;
fileSize = len.toFixed(2) +"MB";
}else if(size/1024/1024>1024){
var len = size/1024/1024;
fileSize = len.toFixed(2)+"GB";
}else{
var len = size/1024;
fileSize = len.toFixed(2)+"KB";
}
return fileSize;
}

Class.prototype.events=function () {
var that = this;
//当文件添加进去
uplaod.on('fileQueued', function( file ){
var fileSize = that.formatFileSize(file.size);
var row={fileId:file.id,fileName:file.name,fileSize:fileSize,validateMd5:'0%',progress:file.id,state:'就绪'};
rowData.push(row);
that.reloadData(rowData);
element.render('progress');
});

//监听进度条,更新进度条信息
uplaod.on( 'uploadProgress', function( file, percentage ) {
element.progress(file.id, (percentage * 100).toFixed(0)+'%');
});


//错误信息监听
uplaod.on('error', function(handler){
if(handler=='F_EXCEED_SIZE'){
layer.msg('上传的单个太大!。<br>操作无法进行,如有需求请联系管理员', {icon: 5});
}else if(handler=='Q_TYPE_DENIED'){
layer.msg('不允许上传此类文件!。<br>操作无法进行,如有需求请联系管理员', {icon: 5});
}
});


//移除上传的文件
table.on('tool(extend-uploader-form)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
that.removeArray(rowData,data.fileId);
uplaod.removeFile(data.fileId,true);
obj.del();
}
});

//开始上传
$("#extent-button-uploader").click(function () {
that.uploadToServer();

});

//单个文件上传成功
uplaod.on( 'uploadSuccess', function( file ) {
that.setTableBtn(file.id,'完成');
});

//所有文件上传成功后
uplaod.on('uploadFinished',function(){//成功后
$("#extent-button-uploader").text("开始上传");
$("#extent-button-uploader").removeClass('layui-btn-disabled');
});

};

Class.prototype.reloadData=function(data){
layui.table.reload('extend-uploader-form',{
data : data
});
};

Class.prototype.register=function () {
var that = this,
options = that.options;
if(!options.md5){
return;
}
// 在文件开始发送前做些异步操作。做md5验证
// WebUploader会等待此异步操作完成后,开始发送文件。
webUploader.Uploader.register({
"before-send-file":"beforeSendFile"
},{
beforeSendFile: function(file){
var task = new $.Deferred();
(new webUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){
var v = that.getTableHead('validateMd5');
var table = $("#extend-uploader-form").next().find('div[class="layui-table-body layui-table-main"]').find('table');
var pro = table.find('td[data-field="progress"]');
for(var i=0;i<pro.length;i++){
var d = $(pro[i]).attr('data-content');
if(d==file.id ){
var t = $(pro[i]).prev();
t.empty();
t.append('<div class="'+v+'">'+(percentage * 100).toFixed(0)+'%</div>');
}
}
}).then(function(val){
$.ajax({
type: "POST"
, url: options.md5
, data: {
type: "md5Check",md5: val //后台接收 String md5
}
, cache: false
, timeout: 3000
, dataType: "json"
}).then(function(data, textStatus, jqXHR){
if(data.data==0){ //若存在,这返回失败给WebUploader,(后台操作)表明该文件不需要上传,然后就可以把数据库查询出的文件信息的物理路径给新文件
task.reject(); //
uplaod.skipFile(file);
that.setTableBtn(file.id,'秒传');
element.progress(file.id,'100%');
}else{
task.resolve();
}
}, function(jqXHR, textStatus, errorThrown){ //任何形式的验证失败,都触发重新上传
task.resolve();
});
});
return $.when(task);
}
});
};


/***
* 无力吐槽table的动态更新,注意更改了table列的位置,或自行新增了表格,请自行在这修改
*/
Class.prototype.getTableHead=function (field) {
//获取table头的单元格class,保证动态设置table内容后单元格不变形
var div = $("#extend-uploader-form").next().find('div[class="layui-table-header"]');
var div2 = div[0];
var table = $(div2).find('table');
var td = table.find('th[data-field="'+field+'"]').find('div').attr('class');
return td;
};

Class.prototype.setTableBtn=function (fileId,val) {
var td = this.getTableHead('oper');
//获取操作栏,修改其状态
var table = $("#extend-uploader-form").next().find('div[class="layui-table-body layui-table-main"]').find('table');
var pro = table.find('td[data-field="progress"]');
for(var i=0;i<pro.length;i++){
var d = $(pro[i]).attr('data-content');
if(d==fileId ){
var t = $(pro[i]).next();
t.empty();
t.append('<div class="'+td+'"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="ok">'+val+'</a></div>')
}
}
}


Class.prototype.uploadToServer=function () {
if(rowData.length<=0){
layer.msg('没有上传的文件', {icon: 5});
return;
}
$("#extent-button-uploader").text("正在上传");
$("#extent-button-uploader").addClass('layui-btn-disabled');
uplaod.upload();
};

Class.prototype.removeArray=function (array,fileId) {
for(var i=0;i<array.length;i++){
if(array[i].fileId==fileId){
array.splice(i,1);
}
}
return array;
};

var uploader = {
render:function (options) {
console.log(options);
var inst = new Class(options);
return inst;
}

};

exports('uploader', uploader);
});
使用


这里好多还没做测试,好多配置可以动态设置,这请自行测试问题,已经做配置,这是一个不完整版啊不完整版。
回帖
  • @爱心
    layui.extend({
    uploader: 'uploader.js的路径' //我上写的那个js文件路径,
    }).use(['uploader'],function(){
    var uploader=layui.uploader
    })
    4 回复
  • 之前用的别人升级upload.js 快升级了 还是用你这种好→_→
    1 回复
  • 爱心
    5天前
    老哥,layuiAdmin专业版的才能用吗?,我用的layui2.3的不能用?但是我好喜欢这个功能
    1 回复
  • 爱心
    4天前
    @Stream 谢谢
    1 回复
  • 搞定了,少写了一个引号,顺便为了解决问题,直接把layui写扩展的方法学会了,我就是个人才![阴险]
    1 回复
  • 前排[good]
    0 回复
  • 喜欢这个功能!!
    0 回复
  • 很好的功能···支持一下···[给力] [给力]
    0 回复
  • 你很棒棒呦
    0 回复
  • 搞的不错。
    0 回复
  • @爱心 1111
    0 回复
  • webuploader.js:121 Uncaught ReferenceError: webuploader is not defined

    报错,怎么用啊,能不能传github做成示例啊
    0 回复
  • 先mark一下
    0 回复
  • 看到还是变多的VIP嘛~嘿嘿~~
    0 回复
  • 强势 mark
    0 回复
  • @Drupal猎人
    layui.extend({
    //你的webuploader.js路径
    webuploader: 'lib/extend/uploader/webuploader' //你看你这个路径是不是你的项目存放源文件webuploader.js的路径
    })
    0 回复
  • 222222222222222222222222
    0 回复
  • 顶顶 顶[嘻嘻]
    0 回复
  • @Stream http://ecommerce.hunterphp.com/admin/news/add 我传到了网上,你看debug报错信息,难道是我哪里写的不对吗?js都加载了啊
    0 回复
  • 不错不错[哈哈]
    0 回复