修改layim-mobile 下面的 upload-mobile
2019-08-10 本文已影响0人
牛奶ban
这几天 客服系统 想用layim 来处理客服消息,但是发现 mobile 模式下 上传居然是不能用,看官方也没有更新,贤心大神让自己改造
于是我用自己蹩脚的js 改了下 ,本地已经测试,主要是改了ajax方式提交 不支持老的浏览器
这个还有 一点 不明白 为啥try catch 老走catch 我注释掉了 就可以了
文件放到 src/lay/modules/mobile 下
具体代码如下
/*!
@Title: layui.upload 单文件上传 - 全浏览器兼容版
@Author: 贤心
@License:MIT
*/
layui.define(['layer-mobile', 'zepto'] , function(exports){
"use strict";
var $ = layui.zepto;
var layer = layui['layer-mobile'];
var device = layui.device();
var elemDragEnter = 'layui-upload-enter';
var elemIframe = 'layui-upload-iframe';
var msgConf = {
icon: 2
,shift: 6
}, fileType = {
file: '文件'
,video: '视频'
,audio: '音频'
};
layer.msg = function(content){
return layer.open({
content: content || ''
,skin: 'msg'
,time: 2 //2秒后自动关闭
});
};
var Upload = function(options){
this.options = options;
};
//初始化渲染
Upload.prototype.init = function(){
var that = this, options = that.options;
var body = $('body'), elem = $(options.elem || '.layui-upload-file');
var iframe = $('<iframe id="'+ elemIframe +'" class="'+ elemIframe +'" name="'+ elemIframe +'"></iframe>');
//插入iframe
$('#'+elemIframe)[0] || body.append(iframe);
return elem.each(function(index, item){
item = $(item);
var form = '<form target="'+ elemIframe +'" method="'+ (options.method||'post') +'" key="set-mine" enctype="multipart/form-data" action="'+ (options.url||'') +'"></form>';
var type = item.attr('lay-type') || options.type; //获取文件类型
//包裹ui元素
if(!options.unwrap){
form = '<div class="layui-box layui-upload-button">' + form + '<span class="layui-upload-icon"><i class="layui-icon"></i>'+ (
item.attr('lay-title') || options.title|| ('上传'+ (fileType[type]||'图片') )
) +'</span></div>';
}
form = $(form);
console.log(form)
//拖拽支持
if(!options.unwrap){
form.on('dragover', function(e){
e.preventDefault();
$(this).addClass(elemDragEnter);
}).on('dragleave', function(){
$(this).removeClass(elemDragEnter);
}).on('drop', function(){
$(this).removeClass(elemDragEnter);
});
}
//如果已经实例化,则移除包裹元素
if(item.parent('form').attr('target') === elemIframe){
if(options.unwrap){
item.unwrap();
} else {
item.parent().next().remove();
item.unwrap().unwrap();
}
};
//包裹元素
item.wrap(form);
//console.log(form);
//触发上传
item.off('change').on('change', function(){
that.action(this, type,form);
});
});
};
//提交上传
Upload.prototype.action = function(input, type,form){
var that = this, options = that.options, val = input.value;
var item = $(input), ext = item.attr('lay-ext') || options.ext || ''; //获取支持上传的文件扩展名;
//console.log(val)
//console.log(form[0])
if(!val){
return;
};
//校验文件
switch(type){
case 'file': //一般文件
if(ext && !RegExp('\\w\\.('+ ext +')$', 'i').test(escape(val))){
layer.msg('不支持该文件格式', msgConf);
return input.value = '';
}
break;
case 'video': //视频文件
if(!RegExp('\\w\\.('+ (ext||'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(val))){
layer.msg('不支持该视频格式', msgConf);
return input.value = '';
}
break;
case 'audio': //音频文件
if(!RegExp('\\w\\.('+ (ext||'mp3|wav|mid') +')$', 'i').test(escape(val))){
layer.msg('不支持该音频格式', msgConf);
return input.value = '';
}
break;
default: //图片文件
if(!RegExp('\\w\\.('+ (ext||'jpg|png|gif|bmp|jpeg') +')$', 'i').test(escape(val))){
layer.msg('不支持该图片格式', msgConf);
return input.value = '';
}
break;
}
//主要是这边传入form
var formData = new FormData(form[0]);
//console.log(item);
//formData.append(options.field,form[0]);
//追加额外的参数
layui.each(options.data, function(key, value){
value = typeof value === 'function' ? value() : value;
formData.append(key, value);
});
console.log(formData)
//提交文件
//如何ajax提交
$.ajax({
url: options.url
,type: 'post'
,data: formData
,contentType: false
,processData: false
,dataType: 'json'
,headers: options.headers || {}
,success: function(res){
if(res){
try {
//console.log(res);
// console.log(11111111);
res = JSON.parse(res);
console.log(res);
} catch(e){
// res = {};
//return layer.msg('请对上传接口返回JSON字符', msgConf);
}
typeof options.success === 'function' && options.success(res, input);
}
// layer.msg('请求上传接口成功');
}
,error: function(){
layer.msg('请求上传接口出现异常');
}
});
// console.log(res);
//options.before && options.before(input);
// item.parent().submit();
// var res;
input.value = '';
};
//暴露接口
exports('upload-mobile', function(options){
var upload = new Upload(options = options || {});
upload.init();
});
});