/*!
@Title: layui.upload 單文件上傳 - 全瀏覽器兼容版
@Author: 賢心
@License:MIT
*/
layui.define('layer' , function(exports){
"use strict";
var $ = layui.jquery;
var layer = layui.layer;
var device = layui.device();
var elemDragEnter = 'layui-upload-enter';
var elemIframe = 'layui-upload-iframe';
var msgConf = {
icon: 2
,shift: 6
}, fileType = {
file: '文件'
,video: '視頻'
,audio: '音頻'
};
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);
//拖拽支持
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);
//觸發上傳
item.off('change').on('change', function(){
console.log("上傳文件大小:"+item[0].files[0].size/(1024*1024)+"MB")
var size=item[0].files[0].size/(1024*1024)
that.action(this,type,size);
});
});
};
//提交上傳
Upload.prototype.action = function(input,type,size){
var that = this, options = that.options, val = input.value;
var item = $(input), ext = item.attr('lay-ext') || options.ext || ''; //獲取支持上傳的文件擴展名;
if(!val){
return;
};
//校驗文件
switch(type){
case 'file': //一般文件
if(ext && !RegExp('\\w\\.('+ ext +')$', 'i').test(escape(val))){
layer.msg('不支持該文件格式', msgConf);
return input.value = '';
}
if(size>200){
layer.msg('文件大小不能超過200MB');
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 = '';
}
if(size>200){
layer.msg('視頻大小不能超過200MB');
return input.value = '';
}
break;
case 'audio': //音頻文件
if(!RegExp('\\w\\.('+ (ext||'mp3|wav|mid') +')$', 'i').test(escape(val))){
layer.msg('不支持該音頻格式', msgConf);
return input.value = '';
}
if(size>100){
layer.msg('音頻大小不能超過100MB');
return input.value = '';
}
break;
default: //圖片文件
if(!RegExp('\\w\\.('+ (ext||'jpg|png|gif|bmp|jpeg') +')$', 'i').test(escape(val))){
layer.msg('不支持該圖片格式', msgConf);
return input.value = '';
}
if(size>2){
layer.msg('圖片大小不能超過2MB');
return input.value = '';
}
break;
}
options.before && options.before(input);
item.parent().submit();
var iframe = $('#'+elemIframe), timer = setInterval(function() {
var res;
try {
res = iframe.contents().find('body').text();
} catch(e) {
layer.msg('上傳接口存在跨域', msgConf);
clearInterval(timer);
}
if(res){
clearInterval(timer);
iframe.contents().find('body').html('');
try {
res = JSON.parse(res);
} catch(e){
res = {};
return layer.msg('請對上傳接口返回JSON字符', msgConf);
}
typeof options.success === 'function' && options.success(res, input);
}
}, 30);
input.value = '';
};
//暴露接口
exports('upload', function(options){
var upload = new Upload(options = options || {});
upload.init();
});
});
給layui的upload加了文件大小限制
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.