github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

优化部分代码的书写规范 

优化部分代码的书写规范
pull/1300/head^2
贤心 2023-06-20 10:43:51 +08:00 committed by GitHub
parent 1b68e228d1 84d38544d5
commit 191134a11f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 188 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
examples/upload.html
View File

@ -97,23 +97,23 @@ layui.use(['upload', 'element'], function(){
var element = layui.element; var element = layui.element;
var uploadInst = upload.render({ var uploadInst = upload.render({
elem: '#test1' elem: '#test1',
,url: 'https://httpbin.org/post' url: 'https://httpbin.org/post',
//,size: 2000 //限制文件大小，单位 KB // size: 2000, //限制文件大小，单位 KB
//,accept: 'file' // accept: 'file',
,method: 'get' method: 'get',
,fileAccept: 'image/*' fileAccept: 'image/*',
,exts: 'jpg|png|gif|bmp|jpeg|pdf' exts: 'jpg|png|gif|bmp|jpeg|pdf',
,data: { //额外参数 data: { // 额外参数
a: 1 a: 1,
,b: function(){ b: function(){
return 2 return 2
} }
} },
,choose: function(obj){ choose: function(obj){
console.log('choose', obj); console.log('choose', obj);
} },
,before: function(obj){ before: function(obj){
//预读本地文件示例，不支持ie8 //预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){ obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64） $('#demo1').attr('src', result); //图片链接（base64）
@ -122,8 +122,8 @@ layui.use(['upload', 'element'], function(){
return; return;
layer.msg('不允许上传') layer.msg('不允许上传')
return false; return false;
} },
,done: function(res, index){ done: function(res, index){
//如果上传失败 //如果上传失败
if(res.code > 0){ if(res.code > 0){
@ -131,8 +131,8 @@ layui.use(['upload', 'element'], function(){
} }
//上传成功 //上传成功
console.log(res, index); console.log(res, index);
} },
,error: function(index, upload){ error: function(index, upload){
this.item.html('重选上传'); this.item.html('重选上传');
//演示失败状态，并实现重传 //演示失败状态，并实现重传
@ -143,8 +143,8 @@ layui.use(['upload', 'element'], function(){
}); });
element.progress('demo', '0%'); element.progress('demo', '0%');
} },
,progress: function(n, elem, res, index){ progress: function(n, elem, res, index){
console.log(n + '%', elem, res, index); //获取进度百分比 console.log(n + '%', elem, res, index); //获取进度百分比
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用 element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
} }
@ -152,34 +152,34 @@ layui.use(['upload', 'element'], function(){
// 重置上述 upload 实例 // 重置上述 upload 实例
uploadInst.reload({ uploadInst.reload({
name:'avatar' name:'avatar',
,accept: 'images' //只允许上传图片 accept: 'images', // 只允许上传图片
,acceptMime: 'image/*' //只筛选图片 acceptMime: 'image/*', // 只筛选图片
//,size: 2 //,size: 2
}); });
// 演示多图片上传 // 演示多图片上传
upload.render({ upload.render({
elem: '#test2' elem: '#test2',
,url: 'https://httpbin.org/post' url: 'https://httpbin.org/post',
,multiple: true // 多文件 multiple: true, // 多文件
,unified: true // 一起上传 --- 2.8.8+ unified: true, // 一起上传 --- 2.8.8+
,accept: 'images' accept: 'images',
,number: 3 //同时上传的数量 number: 3, // 同时上传的数量
,size: 1024 size: 1024,
,before: function(obj){ before: function(obj){
// 预读本地文件示例，不支持ie8 // 预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){ obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">') $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
}); });
// this.files = obj.pushFile(); // this.files = obj.pushFile();
} },
,done: function(res, index){ done: function(res, index){
// 上传完毕 // 上传完毕
console.log(res, index) console.log(res, index)
} },
,allDone: function(obj){ allDone: function(obj){
console.log(obj) console.log(obj)
} }
}); });
@ -187,15 +187,15 @@ layui.use(['upload', 'element'], function(){
// 演示多文件列表 --- 本示例仅演示未开启 unified 属性的情况 // 演示多文件列表 --- 本示例仅演示未开启 unified 属性的情况
var demoListView = $('#demoList'); var demoListView = $('#demoList');
var uploadListIns = upload.render({ var uploadListIns = upload.render({
elem: '#testList' elem: '#testList',
,url: 'https://httpbin.org/post' url: 'https://httpbin.org/post',
,accept: 'file' accept: 'file',
,multiple: true multiple: true,
,number: 3 number: 3,
,auto: false auto: false,
,bindAction: '#testListAction' bindAction: '#testListAction',
,size: 30 size: 30,
,choose: function(obj){ choose: function(obj){
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列 var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
//读取本地文件 //读取本地文件
obj.preview(function(index, file, result){ obj.preview(function(index, file, result){
@ -227,8 +227,8 @@ layui.use(['upload', 'element'], function(){
element.render('progress'); element.render('progress');
}); });
} },
,done: function(res, index, upload){ done: function(res, index, upload){
//if(res.code == 0){ //上传成功 //if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index) var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children(); ,tds = tr.children();
@ -237,16 +237,16 @@ layui.use(['upload', 'element'], function(){
return; return;
//} //}
this.error(index, upload); this.error(index, upload);
} },
,allDone: function(obj){ allDone: function(obj){
console.log(obj) console.log(obj)
} },
,error: function(index, upload){ error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index) var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children(); ,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
} },
,progress: function(n, elem, e, index){ progress: function(n, elem, e, index){
console.log(n); console.log(n);
console.log(index); console.log(index);
element.progress('progress-'+ index, n + '%'); //进度条 element.progress('progress-'+ index, n + '%'); //进度条
@ -255,20 +255,20 @@ layui.use(['upload', 'element'], function(){
upload.render({ upload.render({
elem: '.test333' elem: '.test333',
,url: 'a' url: 'a',
,accept: 'file' accept: 'file',
,before: function(obj){ before: function(obj){
console.log(this.item); console.log(this.item);
} },
,done: function(res){ done: function(res){
console.log(res) console.log(res)
} }
}); });
upload.render({ upload.render({
elem: '.testm' elem: '.testm',
,done: function(res, index, upload){ done: function(res, index, upload){
//获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增 //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
var item = this.item; var item = this.item;
} }
@ -276,28 +276,28 @@ layui.use(['upload', 'element'], function(){
/* /*
upload.render({ upload.render({
elem: '#test33' elem: '#test33',
,url: '' url: '',
,accept: 'file' accept: 'file',
,done: function(res){ done: function(res){
console.log(res) console.log(res)
} }
});*/ });*/
upload.render({ upload.render({
elem: '#test4' elem: '#test4',
,url: '' url: '',
,accept: 'video' accept: 'video',
,done: function(res){ done: function(res){
console.log(res) console.log(res)
} }
}); });
upload.render({ upload.render({
elem: '#test5' elem: '#test5',
,url: '' url: '',
,accept: 'audio' accept: 'audio',
,done: function(res){ done: function(res){
console.log(res) console.log(res)
} }
}); });
@ -305,39 +305,39 @@ layui.use(['upload', 'element'], function(){
//手动上传 //手动上传
upload.render({ upload.render({
elem: '#test6' elem: '#test6',
,url: '' url: '',
,auto: false auto: false,
//,multiple: true // multiple: true,
,bindAction: '#test7' bindAction: '#test7',
,choose: function(obj){ choose: function(obj){
var that = this; var that = this;
obj.preview(function(index, file){ obj.preview(function(index, file){
that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>'); that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>');
console.log(file.name); console.log(file.name);
//obj.resetFile(index, file, '123.jpg'); //obj.resetFile(index, file, '123.jpg');
}); });
} },
,before: function(){ before: function(){
console.log(345); console.log(345);
} },
,done: function(res){ done: function(res){
console.log(res); console.log(res);
} }
}); });
upload.render({ upload.render({
elem: '#test8' elem: '#test8',
,url: 'https://httpbin.org/post' url: 'https://httpbin.org/post',
,done: function(res){ done: function(res){
console.log(res); console.log(res);
} }
}); });
upload.render({ upload.render({
elem: '#test9' elem: '#test9',
,url: '' url: '',
,done: function(res){ done: function(res){
console.log(res); console.log(res);
} }
}); });

32
gulpfile.js
View File

@ -17,11 +17,11 @@ const yargs = require('yargs');
const config = { const config = {
// 注释 // 注释
comment: [ comment: [
'/** v<%= pkg.version %> | <%= pkg.license %> Licensed */<%= js %>' '/** v<%= pkg.version %> | <%= pkg.license %> Licensed */<%= js %>',
,{pkg: pkg, js: ';'} {pkg: pkg, js: ';'}
] ],
// 模块 // 模块
,modules: 'lay,laytpl,laypage,laydate,jquery,layer,util,dropdown,slider,colorpicker,element,upload,form,table,treeTable,tree,transfer,carousel,rate,flow,code' modules: 'lay,laytpl,laypage,laydate,jquery,layer,util,dropdown,slider,colorpicker,element,upload,form,table,treeTable,tree,transfer,carousel,rate,flow,code'
}; };
// 获取参数 // 获取参数
@ -38,8 +38,8 @@ const dir = {
// 输出目录 // 输出目录
const dest = ({ const dest = ({
dist: './dist' dist: './dist',
,rls: dir.rls + '/layui' rls: dir.rls + '/layui'
}[argv.dest || 'dist'] || argv.dest) + (argv.vs ? '/'+ pkg.version : ''); }[argv.dest || 'dist'] || argv.dest) + (argv.vs ? '/'+ pkg.version : '');
// js // js
@ -150,21 +150,21 @@ exports.help = () => {
let usage = '\nUsage: gulp [options] tasks'; let usage = '\nUsage: gulp [options] tasks';
let parser = yargs.usage(usage, { let parser = yargs.usage(usage, {
dest: { dest: {
type: 'string' type: 'string',
,desc: '定义输出目录，可选项：dist（默认）、rls、任意路径' desc: '定义输出目录，可选项：dist（默认）、rls、任意路径'
} },
,vs: { vs: {
type: 'boolean' type: 'boolean',
,desc: '生成一个带版本号的文件夹' desc: '生成一个带版本号的文件夹'
} }
}); });
parser.showHelp(console.log); parser.showHelp(console.log);
console.log([ console.log([
'Tasks:' 'Tasks:',
,' default 默认任务' ' default 默认任务',
,' rls 发行任务' ' rls 发行任务',
,' cp 将 dist 目录复制一份到参数 --dest 指向的目录' ' cp 将 dist 目录复制一份到参数 --dest 指向的目录'
].join('\n'), '\n\nExamples:\n gulp cp --dest ./v --vs', '\n'); ].join('\n'), '\n\nExamples:\n gulp cp --dest ./v --vs', '\n');
return gulp.src('./'); return gulp.src('./');
}; };

4
package.json
View File

@ -15,12 +15,12 @@
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp-clean-css": "^4.3.0", "gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-replace": "^1.1.3", "gulp-replace": "^1.1.4",
"gulp-rename": "^2.0.0", "gulp-rename": "^2.0.0",
"gulp-header": "^2.0.9", "gulp-header": "^2.0.9",
"gulp-footer": "^2.1.0", "gulp-footer": "^2.1.0",
"del": "^2.2.2", "del": "^2.2.2",
"minimist": "^1.2.5" "minimist": "^1.2.8"
}, },
"bugs": { "bugs": {
"url": "https://gitee.com/layui/layui/issues" "url": "https://gitee.com/layui/layui/issues"

119
src/modules/upload.js
View File

@ -6,49 +6,56 @@
layui.define(['lay','layer'], function(exports){ layui.define(['lay','layer'], function(exports){
"use strict"; "use strict";
var $ = layui.$ var $ = layui.$;
,layer = layui.layer var layer = layui.layer;
,device = layui.device() var device = layui.device();
// 外部接口 // 外部接口
,upload = { var upload = {
config: {} //全局配置项 config: {}, // 全局配置项
// 设置全局项 // 设置全局项
,set: function(options){ set: function(options){
var that = this; var that = this;
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
} },
// 事件 // 事件
,on: function(events, callback){ on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
} }
} };
// 操作当前实例 // 操作当前实例
,thisUpload = function(){ var thisUpload = function(){
var that = this; var that = this;
return { return {
upload: function(files){ upload: function(files){
that.upload.call(that, files); that.upload.call(that, files);
} },
,reload: function(options){ reload: function(options){
that.reload.call(that, options); that.reload.call(that, options);
},
config: that.config
} }
,config: that.config };
}
}
// 字符常量 // 字符常量
,MOD_NAME = 'upload', ELEM = 'layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' var MOD_NAME = 'upload';
var ELEM = 'layui-upload';
var THIS = 'layui-this';
var SHOW = 'layui-show';
var HIDE = 'layui-hide';
var DISABLED = 'layui-disabled';
,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag' var ELEM_FILE = 'layui-upload-file';
var ELEM_FORM = 'layui-upload-form';
var ELEM_IFRAME = 'layui-upload-iframe';
var ELEM_CHOOSE = 'layui-upload-choose';
var ELEM_DRAG = 'layui-upload-drag';
// 构造器 // 构造器
,Class = function(options){ var Class = function(options){
var that = this; var that = this;
that.config = $.extend({}, that.config, upload.config, options); that.config = $.extend({}, that.config, upload.config, options);
that.render(); that.render();
@ -56,26 +63,26 @@ layui.define(['lay','layer'], function(exports){
// 默认配置 // 默认配置
Class.prototype.config = { Class.prototype.config = {
accept: 'images' //允许上传的文件类型：images/file/video/audio accept: 'images', // 允许上传的文件类型：images/file/video/audio
,exts: '' //允许上传的文件后缀名 exts: '', // 允许上传的文件后缀名
,auto: true //是否选完文件后自动上传 auto: true, // 是否选完文件后自动上传
,bindAction: '' //手动上传触发的元素 bindAction: '', // 手动上传触发的元素
,url: '' //上传地址 url: '', // 上传地址
,force: '' //强制规定返回的数据格式，目前只支持是否强制 json force: '', // 强制规定返回的数据格式，目前只支持是否强制 json
,field: 'file' //文件字段名 field: 'file', // 文件字段名
,acceptMime: '' //筛选出的文件类型，默认为所有文件 acceptMime: '', // 筛选出的文件类型，默认为所有文件
,method: 'post' //请求上传的 http 类型 method: 'post', // 请求上传的 http 类型
,data: {} //请求上传的额外参数 data: {}, // 请求上传的额外参数
,drag: true //是否允许拖拽上传 drag: true, // 是否允许拖拽上传
,size: 0 //文件限制大小，默认不限制 size: 0, // 文件限制大小，默认不限制
,number: 0 //允许同时上传的文件数，默认不限制 number: 0, // 允许同时上传的文件数，默认不限制
,multiple: false //是否允许多文件上传，不支持ie8-9 multiple: false // 是否允许多文件上传，不支持ie8-9
}; };
// 初始渲染 // 初始渲染
Class.prototype.render = function(options){ Class.prototype.render = function(options){
var that = this var that = this;
,options = that.config; var options = that.config;
options.elem = $(options.elem); options.elem = $(options.elem);
options.bindAction = $(options.bindAction); options.bindAction = $(options.bindAction);
@ -86,14 +93,14 @@ layui.define(['lay','layer'], function(exports){
//追加文件域 //追加文件域
Class.prototype.file = function(){ Class.prototype.file = function(){
var that = this var that = this;
,options = that.config var options = that.config;
,elemFile = that.elemFile = $([ var elemFile = that.elemFile = $([
'<input class="'+ ELEM_FILE +'" type="file" accept="'+ options.acceptMime +'" name="'+ options.field +'"' '<input class="'+ ELEM_FILE +'" type="file" accept="'+ options.acceptMime +'" name="'+ options.field +'"'
,(options.multiple ? ' multiple' : '') ,(options.multiple ? ' multiple' : '')
,'>' ,'>'
].join('')) ].join(''));
,next = options.elem.next(); var next = options.elem.next();
if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){ if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){
next.remove(); next.remove();
@ -105,8 +112,8 @@ layui.define(['lay','layer'], function(exports){
} }
that.isFile() ? ( that.isFile() ? (
that.elemFile = options.elem that.elemFile = options.elem,
,options.field = options.elem[0].name options.field = options.elem[0].name
) : options.elem.after(elemFile); ) : options.elem.after(elemFile);
//初始化ie8/9的Form域 //初始化ie8/9的Form域
@ -117,10 +124,10 @@ layui.define(['lay','layer'], function(exports){
//ie8-9初始化 //ie8-9初始化
Class.prototype.initIE = function(){ Class.prototype.initIE = function(){
var that = this var that = this;
,options = that.config var options = that.config;
,iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>') var iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>');
,elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">' var elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
,'</form>'].join('')); ,'</form>'].join(''));
//插入iframe //插入iframe
@ -480,15 +487,15 @@ layui.define(['lay','layer'], function(exports){
delete options.elem; delete options.elem;
delete options.bindAction; delete options.bindAction;
var that = this var that = this;
,options = that.config = $.extend({}, that.config, upload.config, options) var options = that.config = $.extend({}, that.config, upload.config, options);
,next = options.elem.next(); var next = options.elem.next();
//更新文件域相关属性 //更新文件域相关属性
next.attr({ next.attr({
name: options.name name: options.name,
,accept: options.acceptMime accept: options.acceptMime,
,multiple: options.multiple multiple: options.multiple
}); });
}; };
@ -508,9 +515,9 @@ layui.define(['lay','layer'], function(exports){
// 设置选择的文本 // 设置选择的文本
var setChooseText = function(files, filename){ var setChooseText = function(files, filename){
var elemFile = that.elemFile var elemFile = that.elemFile;
,item = options.item ? options.item : options.elem var item = options.item ? options.item : options.elem;
,value = files.length > 1 var value = files.length > 1
? files.length + '个文件' ? files.length + '个文件'
: ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || ''); : ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || '');