Revert "release v2.8.8"

pull/1289/head
贤心 2023-06-20 09:24:34 +08:00 committed by GitHub
parent 4aecf1bc41
commit 342dae2480
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 114 additions and 227 deletions

2
dist/css/layui.css vendored

File diff suppressed because one or more lines are too long

2
dist/layui.js vendored

File diff suppressed because one or more lines are too long

View File

@ -248,7 +248,6 @@ layer.prompt({
| 私有属性 | 描述 | 类型 | 默认值 | | 私有属性 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| photos | 图片层的数据源,格式详见下述示例。 | object | - | | photos | 图片层的数据源,格式详见下述示例。 | object | - |
| hideFooter <sup>2.8+</sup> | 是否隐藏底部栏 | boolean | `false` |
| tab | 图片层切换后的回调函数,返回的参数见下述示例 | function | - | | tab | 图片层切换后的回调函数,返回的参数见下述示例 | function | - |
该方法用于弹出图片层,基于 `type: 1`(即 `page` 层)的自定义内容。 该方法用于弹出图片层,基于 `type: 1`(即 `page` 层)的自定义内容。

View File

@ -82,7 +82,7 @@ layui.use(['table', 'dropdown'], function(){
{type: 'checkbox', fixed: 'left'}, {type: 'checkbox', fixed: 'left'},
{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计:'}, {field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计:'},
{field:'username', width:80, title: '用户'}, {field:'username', width:80, title: '用户'},
{field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" lay-event="email-tips" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'}, {field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'},
{field:'sex', width:80, title: '性别', sort: true}, {field:'sex', width:80, title: '性别', sort: true},
{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){ {field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
// console.log(obj) // console.log(obj)
@ -286,17 +286,6 @@ layui.use(['table', 'dropdown'], function(){
}; };
}); });
// 表头自定义元素工具事件 --- 2.8.8+
table.on('colTool(test)', function(obj){
var event = obj.event;
console.log(obj);
if(event === 'email-tips'){
layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
title: '当前列属性配置项'
});
}
});
// 触发单元格工具事件 // 触发单元格工具事件
table.on('tool(test)', function(obj){ // 双击 toolDouble table.on('tool(test)', function(obj){ // 双击 toolDouble
var data = obj.data; // 获得当前行数据 var data = obj.data; // 获得当前行数据

View File

@ -532,8 +532,7 @@ table.hideCol('test', false); // `true` or `false`
| event | 描述 | | event | 描述 |
| --- | --- | | --- | --- |
| [toolbar](#on-toolbar) | 头部工具栏事件 | | [toolbar](#on-toolbar) | 头部工具栏事件 |
| [sort](#on-sort) | 表头排序切换事件 | | [sort](#on-sort) | 排序切换事件 |
| [colTool](#on-colTool) <sup>2.8.8+</sup> | 表头自定义元素工具事件 |
| [colResized](#on-colResized) <sup>2.8+</sup> | 列拖拽宽度后的事件 | | [colResized](#on-colResized) <sup>2.8+</sup> | 列拖拽宽度后的事件 |
| [colToggled](#on-colToggled) <sup>2.8+</sup> | 列筛选(显示或隐藏)后的事件 | | [colToggled](#on-colToggled) <sup>2.8+</sup> | 列筛选(显示或隐藏)后的事件 |
| [row / rowDouble](#on-row) | 行单击和双击事件 | | [row / rowDouble](#on-row) | 行单击和双击事件 |
@ -633,32 +632,6 @@ table.on('sort(test)', function(obj){
}); });
``` ```
<h3 id="on-colTool" lay-pid="table.on" class="ws-anchor ws-bold">表头自定义元素工具事件 <sup>2.8.8+</sup></h3>
`table.on('colTool(filter)', callback);`
点击表头单元格中带有 `lay-event` 属性的自定义元素触发,可充分借助该事件扩展 table 更多的操作空间。
```js
var table = layui.table;
// 渲染
table.render({
elem: '#test',
cols: [[
{field:'username', title:'用户名 <i class="layui-icon layui-icon-username" lay-event="username"></i>'
]]
// … // 其他属性
});
// 列拖拽宽度后的事件
table.on('colTool(test)', function(obj){
var col = obj.col; // 获取当前列属性配置项
var options = obj.config; // 获取当前表格基础属性配置项
var layEvent = obj.event; // 获得自定义元素对应的 lay-event 属性值
console.log(obj); // 查看对象所有成员
});
```
<h3 id="on-colResized" lay-pid="table.on" class="ws-anchor ws-bold">列拖拽宽度后的事件 <sup>2.8+</sup></h3> <h3 id="on-colResized" lay-pid="table.on" class="ws-anchor ws-bold">列拖拽宽度后的事件 <sup>2.8+</sup></h3>
@ -727,7 +700,6 @@ table.render({
// 行单击事件 // 行单击事件
table.on('row(test)', function(obj){ table.on('row(test)', function(obj){
var data = obj.data; // 得到当前行数据 var data = obj.data; // 得到当前行数据
var dataCache = obj.dataCache; // 得到当前行缓存数据,包含特定字段 --- 2.8.8+
var index = obj.index; // 得到当前行索引 var index = obj.index; // 得到当前行索引
var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象 var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
var options = obj.config; // 获取当前表格基础属性配置项 var options = obj.config; // 获取当前表格基础属性配置项
@ -832,7 +804,6 @@ layui.use(function(){
// 单元格工具事件 // 单元格工具事件
table.on('tool(test)', function(obj){ table.on('tool(test)', function(obj){
var data = obj.data; // 得到当前行数据 var data = obj.data; // 得到当前行数据
var dataCache = obj.dataCache; // 得到当前行缓存数据,包含特定字段 --- 2.8.8+
var index = obj.index; // 得到当前行索引 var index = obj.index; // 得到当前行索引
var layEvent = obj.event; // 获得元素对应的 lay-event 属性值 var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象 var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象

View File

@ -227,20 +227,6 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
`false` `false`
</td>
</tr>
<tr>
<td>unified <sup>2.8.8+</sup></td>
<td>
选择多文件时,是否统一上传,即只发送一次请求。
</td>
<td>boolean</td>
<td>
`false`
</td> </td>
</tr> </tr>
<tr> <tr>

View File

@ -12,46 +12,25 @@ toc: true
> 导读:📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html) > 导读:📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
<h2 id="2.8.8" class="ws-anchor">
2.8.8
<span class="layui-badge-rim">2023-06-20</span>
</h2>
- #### form
- 新增 `input` 获取焦点时的光环效果,以提升当前活动输入框的辨别度
- 取消 上个版本对 `select` 开启搜索时 `value` 的改动,由于存在若干不可控的影响
- #### table
- 新增 `colTool` 事件,点击表头自定义元素触发,并返回当前列的相关信息,提升 table 的可玩性
- 新增 `row,tool,checkbox,radio` 事件返回的 `dataCache` 属性,可获得当前行缓存数据,包含特定字段
- #### upload
- 新增 `unified` 属性,用于选择多文件时是否统一上传,即只发送一次请求 # I6Z171
- #### 其他
- 优化 `layui.js,layer.js` 部分代码细节 # 1285
### 下载: [layui-v2.8.8.zip](https://gitee.com/layui/layui/attach_files/1444527/download)
---
<h2 id="2.8.7" class="ws-anchor"> <h2 id="2.8.7" class="ws-anchor">
2.8.7 2.8.7
<span class="layui-badge-rim">2023-06-16</span> <span class="layui-badge-rim">2023-06-16</span>
</h2> </h2>
- #### form #### form
- ~~优化 `select` 开启搜索时输入状态,将值转移到 `placeholder`,便于输入~~ # 1280 - 优化 `select` 开启搜索时输入状态,将值转义到 `placeholder`,便于输入 # 1280
<br>*注:由于存在若干影响,该项功能已在 `2.8.8` 中取消* #### table
- #### table
- 新增 表头复选框的半选效果,当数据项部分选中且未全选时显示 - 新增 表头复选框的半选效果,当数据项部分选中且未全选时显示
- 优化 `table.setRowChecked()` 方法,新增当前行选中背景色,便于与 hover 等活动背景色区分 - 优化 `table.setRowChecked()` 方法,新增当前行选中背景色,便于与 hover 等活动背景色区分
- 剔除 `table.setRowChecked()` 方法中的 `selectedStyle` 属性,因为没有实质意义 - 剔除 `table.setRowChecked()` 方法中的 `selectedStyle` 属性,因为没有实质意义
- 优化 表头部分字段为 `hide` 在数据异常的情况下可能出现的表头错位的问题 # 1281 - 优化 表头部分字段为 `hide` 在数据异常的情况下可能出现的表头错位的问题 # 1281
- 优化 `done` 回调函数,新增参数 `origin` 用于区分重载和重新渲染数据 # 1281 - 优化 `done` 回调函数,新增参数 `origin` 用于区分重载和重新渲染数据 # 1281
- 加强 `ignoreExport` 表头属性,允许指定不排除哪些字段 # 1281 - 加强 `ignoreExport` 表头属性,允许指定不排除哪些字段 # 1281
- #### treeTable #### treeTable
- 新增 `view.expandAllDefault` 属性,用于设置是否默认展开全部节点 # 1281 - 新增 `view.expandAllDefault` 属性,用于设置是否默认展开全部节点 # 1281
- 修复 开启排序且在 `done` 回调中执行了 `expandAll` 展开全部导致死循环问题 # 1281 - 修复 开启排序且在 `done` 回调中执行了 `expandAll` 展开全部导致死循环问题 # 1281
- 修复 执行 `treeTable.reload(id)``id` 未匹配到对应实例时出现的报错问题 # 1281/I7CXLN - 修复 执行 `treeTable.reload(id)``id` 未匹配到对应实例时出现的报错问题 # 1281/I7CXLN
- #### grid #### grid
- 修复 space30 和 space32 边距相同的问题 # I7D7YP - 修复 space30 和 space32 边距相同的问题 # I7D7YP
### 下载: [layui-v2.8.7.zip](https://gitee.com/layui/layui/attach_files/1441026/download) ### 下载: [layui-v2.8.7.zip](https://gitee.com/layui/layui/attach_files/1441026/download)

View File

@ -157,11 +157,11 @@ layui.use(['table', 'dropdown'], function(){
{type: 'checkbox', fixed: 'left'} {type: 'checkbox', fixed: 'left'}
//,{type: 'numbers', fixed: 'left'} //,{type: 'numbers', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'} ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'}
,{field:'username', title:'用户名 <i class="layui-icon layui-icon-username" lay-event="username"></i>', width:120, edit: function(d){ ,{field:'username', title:'用户名', width:120, edit: function(d){
return !d.LAY_DISABLED; return !d.LAY_DISABLED;
}, templet: '#usernameTpl'} }, templet: '#usernameTpl'}
,{field:'xxx', title:'测试', edit: 'text'} ,{field:'xxx', title:'测试', edit: 'text'}
,{field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 <i class="layui-icon layui-icon-email" lay-event="email"></i>', fieldTitle: '邮箱', hide: 0, edit: 'text', templet: function(d){ ,{field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 <i class="layui-icon layui-icon-email"></i>', fieldTitle: '邮箱', hide: 0, edit: 'text', templet: function(d){
return '<em>'+ layui.util.escape(d.email) +'</em>' return '<em>'+ layui.util.escape(d.email) +'</em>'
}} }}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false} ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false}
@ -421,7 +421,7 @@ layui.use(['table', 'dropdown'], function(){
}); });
}); });
// 头部工具栏事件 // 工具栏事件
table.on('toolbar(test)', function(obj){ table.on('toolbar(test)', function(obj){
var id = obj.config.id; var id = obj.config.id;
var checkStatus = table.checkStatus(id); var checkStatus = table.checkStatus(id);
@ -445,11 +445,6 @@ layui.use(['table', 'dropdown'], function(){
}; };
}); });
// 表头自定义元素工具事件
table.on('colTool(test)', function(obj){
console.log(obj);
});
//触发单元格工具事件 //触发单元格工具事件
table.on('tool(test)', function(obj){ // 双击 toolDouble table.on('tool(test)', function(obj){ // 双击 toolDouble
var data = obj.data; var data = obj.data;
@ -494,7 +489,7 @@ layui.use(['table', 'dropdown'], function(){
// 行单击事件 // 行单击事件
table.on('row(test)', function(obj){ table.on('row(test)', function(obj){
console.log(obj); // console.log(obj);
// layer.closeAll('tips'); // layer.closeAll('tips');
obj.setRowChecked({ obj.setRowChecked({
// type: 'radio' // type: 'radio'

View File

@ -92,9 +92,9 @@ hr{margin: 30px 0;}
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script> <script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<script> <script>
layui.use(['upload', 'element'], function(){ layui.use(['upload', 'element'], function(){
var $ = layui.$; var $ = layui.jquery
var upload = layui.upload; ,upload = layui.upload
var element = layui.element; ,element = layui.element;
var uploadInst = upload.render({ var uploadInst = upload.render({
elem: '#test1' elem: '#test1'
@ -103,7 +103,7 @@ layui.use(['upload', 'element'], function(){
//,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(){
@ -162,8 +162,7 @@ layui.use(['upload', 'element'], function(){
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+
,accept: 'images' ,accept: 'images'
,number: 3 //同时上传的数量 ,number: 3 //同时上传的数量
,size: 1024 ,size: 1024
@ -177,14 +176,14 @@ layui.use(['upload', 'element'], function(){
} }
,done: function(res, index){ ,done: function(res, index){
//上传完毕 //上传完毕
console.log(res, index) //console.log(this.files)
} }
,allDone: function(obj){ ,allDone: function(obj){
console.log(obj) console.log(obj)
} }
}); });
// 演示多文件列表 --- 本示例仅演示未开启 unified 属性的情况 //演示多文件列表
var demoListView = $('#demoList'); var demoListView = $('#demoList');
var uploadListIns = upload.render({ var uploadListIns = upload.render({
elem: '#testList' elem: '#testList'
@ -248,7 +247,6 @@ layui.use(['upload', 'element'], function(){
} }
,progress: function(n, elem, e, index){ ,progress: function(n, elem, e, index){
console.log(n); console.log(n);
console.log(index);
element.progress('progress-'+ index, n + '%'); //进度条 element.progress('progress-'+ index, n + '%'); //进度条
} }
}); });

View File

@ -1,6 +1,6 @@
{ {
"name": "layui", "name": "layui",
"version": "2.8.8", "version": "2.8.7",
"description": "Classic modular Front-End UI library", "description": "Classic modular Front-End UI library",
"main": "dist/layui.js", "main": "dist/layui.js",
"license": "MIT", "license": "MIT",

View File

@ -720,7 +720,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-select::-webkit-input-placeholder{line-height: 1.3;} .layui-select::-webkit-input-placeholder{line-height: 1.3;}
.layui-input, .layui-textarea{display: block; width: 100%; padding-left: 10px;} .layui-input, .layui-textarea{display: block; width: 100%; padding-left: 10px;}
.layui-input:hover, .layui-textarea:hover{border-color: #d2d2d2 !important;} .layui-input:hover, .layui-textarea:hover{border-color: #d2d2d2 !important;}
.layui-input:focus, .layui-textarea:focus{border-color: #16b777 !important; box-shadow: 0 0 0 3px rgba(22,183,119,0.08);} .layui-input:focus, .layui-textarea:focus{border-color: #d2d2d2 !important;}
.layui-textarea{position: relative; min-height: 100px; height: auto; line-height: 20px; padding: 6px 10px; resize: vertical;} .layui-textarea{position: relative; min-height: 100px; height: auto; line-height: 20px; padding: 6px 10px; resize: vertical;}
.layui-select{padding: 0 10px;} .layui-select{padding: 0 10px;}
.layui-form select, .layui-form select,
@ -744,7 +744,7 @@ a cite{font-style: normal; *cursor:pointer;}
/* 警告条 */ /* 警告条 */
.layui-form-danger:focus, .layui-form-danger:focus,
.layui-form-danger+.layui-form-select .layui-input{border-color: #ff5722 !important; box-shadow: 0 0 0 3px rgba(255,87,34,0.08);} .layui-form-danger+.layui-form-select .layui-input{border-color: #ff5722 !important;}
/* 输入框点缀 */ /* 输入框点缀 */
@ -780,7 +780,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-input-wrap .layui-input-prefix, .layui-input-wrap .layui-input-prefix,
.layui-input-wrap .layui-input-suffix, .layui-input-wrap .layui-input-suffix,
.layui-input-wrap .layui-input-split{pointer-events: none;} .layui-input-wrap .layui-input-split{pointer-events: none;}
.layui-input-wrap .layui-input:focus + .layui-input-split{border-color: #16b777;} .layui-input-wrap .layui-input:focus + .layui-input-split{border-color: #d2d2d2;}
.layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 0; border-right-width: 1px;} .layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 0; border-right-width: 1px;}
/* 输入框动态点缀 */ /* 输入框动态点缀 */
@ -1011,9 +1011,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-view .layui-table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;} .layui-table-view .layui-table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;}
.layui-table-view .layui-table th, .layui-table-view .layui-table th,
.layui-table-view .layui-table td{padding: 0; border-top: none; border-left: none;} .layui-table-view .layui-table td{padding: 0; border-top: none; border-left: none;}
.layui-table-view .layui-table th [lay-event],
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span{cursor: pointer;} .layui-table-view .layui-table th.layui-unselect .layui-table-cell span{cursor: pointer;}
.layui-table-view .layui-table th span,
.layui-table-view .layui-table td{cursor: default;} .layui-table-view .layui-table td{cursor: default;}
.layui-table-view .layui-table td[data-edit]{cursor: text;} .layui-table-view .layui-table td[data-edit]{cursor: text;}
.layui-table-view .layui-table td[data-edit]:hover:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #16B777; pointer-events: none; content: "";} .layui-table-view .layui-table td[data-edit]:hover:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #16B777; pointer-events: none; content: "";}

View File

@ -16,7 +16,7 @@
}; };
var Layui = function(){ var Layui = function(){
this.v = '2.8.8'; // Layui 版本号 this.v = '2.8.7'; // Layui 版本号
}; };
// 识别预先可能定义的指定全局对象 // 识别预先可能定义的指定全局对象

View File

@ -318,6 +318,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
reElem.addClass(CLASS + 'up'); reElem.addClass(CLASS + 'up');
} }
// 删除 input 已有文本并放入 placeholder方便输入
var inputValue = $.trim(input.val());
// 有值时才删除并替换 placeholder
if(inputValue){
input.attr('placeholder', inputValue);
input.val(''); // 清空输入框的值
}
followScroll(); followScroll();
}; };

View File

@ -1809,13 +1809,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var _BODY = $('body'); var _BODY = $('body');
var dict = {}; var dict = {};
// 头部工具栏操作事件 // 工具栏操作事件
that.layTool.on('click', '*[lay-event]', function(e){ that.layTool.on('click', '*[lay-event]', function(e){
var othis = $(this); var othis = $(this)
var events = othis.attr('lay-event'); ,events = othis.attr('lay-event')
var openPanel = function(sets){ ,openPanel = function(sets){
var list = $(sets.list); var list = $(sets.list)
var panel = $('<ul class="' + ELEM_TOOL_PANEL + '"></ul>'); ,panel = $('<ul class="' + ELEM_TOOL_PANEL + '"></ul>');
panel.html(list); panel.html(list);
@ -1948,21 +1948,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
},{})); },{}));
}); });
// 表头自定义元素事件
that.layHeader.on('click', '*[lay-event]', function(e){
var othis = $(this);
var events = othis.attr('lay-event');
var th = othis.closest('th');
var key = th.data('key');
var col = that.col(key);
layui.event.call(this, MOD_NAME, 'colTool('+ filter +')', $.extend({
event: events,
config: options,
col: col
},{}));
});
// 分页栏操作事件 // 分页栏操作事件
that.layPagebar.on('click', '*[lay-event]', function(e){ that.layPagebar.on('click', '*[lay-event]', function(e){
var othis = $(this); var othis = $(this);
@ -2128,7 +2113,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
tr: tr, // 行元素 tr: tr, // 行元素
config: options, config: options,
data: table.clearCacheKey(data), // 当前行数据 data: table.clearCacheKey(data), // 当前行数据
dataCache: data, // 当前行缓存中的数据
index: index, index: index,
del: function(){ // 删除行数据 del: function(){ // 删除行数据
table.cache[that.key][index] = []; table.cache[that.key][index] = [];

View File

@ -185,22 +185,18 @@ layui.define(['lay','layer'], function(exports){
//高级浏览器处理方式,支持跨域 //高级浏览器处理方式,支持跨域
var ajaxSend = function(){ var ajaxSend = function(){
var successful = 0; var successful = 0;
var failed = 0; var failed = 0
var items = getFiles(); var items = getFiles();
var allDone = function(){ // 多文件全部上传完毕的回调
// 多文件全部上传完毕的回调
var allDone = function(){
if(options.multiple && successful + failed === that.fileLength){ if(options.multiple && successful + failed === that.fileLength){
typeof options.allDone === 'function' && options.allDone({ typeof options.allDone === 'function' && options.allDone({
total: that.fileLength, total: that.fileLength
successful: successful, ,successful: successful
failed: failed ,failed: failed
}); });
} }
}; };
layui.each(items, function(index, file){
// 发送请求
var request = function(sets){
var formData = new FormData(); var formData = new FormData();
//追加额外的参数 //追加额外的参数
@ -209,32 +205,32 @@ layui.define(['lay','layer'], function(exports){
formData.append(key, value); formData.append(key, value);
}); });
// 添加 file 到表单域 //最后添加 file 到表单域
sets.unified ? layui.each(items, function(index, file){
formData.append(options.field, file); formData.append(options.field, file);
}) : formData.append(options.field, sets.file);
// ajax 参数 //提交文件
var opts = { var opts = {
url: options.url, url: options.url
type: 'post', // 统一采用 post 上传 ,type: 'post' //统一采用 post 上传
data: formData, ,data: formData
contentType: false, ,contentType: false
processData: false, ,processData: false
dataType: 'json', ,dataType: 'json'
headers: options.headers || {}, ,headers: options.headers || {}
success: function(res){ // 成功回调 //成功回调
options.unified ? (successful += that.fileLength) : successful++; ,success: function(res){
done(sets.index, res); successful++;
done(index, res);
allDone(); allDone();
}, }
error: function(e){ // 异常回调 //异常回调
options.unified ? (failed += that.fileLength) : failed++; ,error: function(e){
failed++;
that.msg([ that.msg([
'Upload failed, please try again.', 'Upload failed, please try again.',
'status: '+ (e.status || '') +' - '+ (e.statusText || 'error') 'status: '+ (e.status || '') +' - '+ (e.statusText || 'error')
].join('<br>')); ].join('<br>'));
error(sets.index); error(index);
allDone(); allDone();
} }
}; };
@ -246,33 +242,18 @@ layui.define(['lay','layer'], function(exports){
xhr.upload.addEventListener("progress", function (obj) { xhr.upload.addEventListener("progress", function (obj) {
if(obj.lengthComputable){ if(obj.lengthComputable){
var percent = Math.floor((obj.loaded/obj.total)* 100); //百分比 var percent = Math.floor((obj.loaded/obj.total)* 100); //百分比
options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, sets.index); options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, index);
} }
}); });
return xhr; return xhr;
} }
} }
$.ajax(opts); $.ajax(opts);
};
// 多文件是否一起上传
if(options.unified){
request({
unified: true,
index: 0
});
} else {
layui.each(items, function(index, file){
request({
index: index,
file: file
});
}); });
} }
};
//低版本 IE 处理方式,不支持跨域 //低版本 IE 处理方式,不支持跨域
var iframeSend = function(){ ,iframeSend = function(){
var iframe = $('#'+ ELEM_IFRAME); var iframe = $('#'+ ELEM_IFRAME);
that.elemFile.parent().submit(); that.elemFile.parent().submit();
@ -294,10 +275,10 @@ layui.define(['lay','layer'], function(exports){
done(0, res); done(0, res);
} }
}, 30); }, 30);
}; }
//统一回调 //统一回调
var done = function(index, res){ ,done = function(index, res){
that.elemFile.next('.'+ ELEM_CHOOSE).remove(); that.elemFile.next('.'+ ELEM_CHOOSE).remove();
elemFile.value = ''; elemFile.value = '';
@ -315,59 +296,58 @@ layui.define(['lay','layer'], function(exports){
typeof options.done === 'function' && options.done(res, index || 0, function(files){ typeof options.done === 'function' && options.done(res, index || 0, function(files){
that.upload(files); that.upload(files);
}); });
}; }
//统一网络异常回调 //统一网络异常回调
var error = function(index){ ,error = function(index){
if(options.auto){ if(options.auto){
elemFile.value = ''; elemFile.value = '';
} }
typeof options.error === 'function' && options.error(index || 0, function(files){ typeof options.error === 'function' && options.error(index || 0, function(files){
that.upload(files); that.upload(files);
}); });
}; }
var check; ,exts = options.exts
var exts = options.exts; ,check ,value = function(){
var value = function(){
var arr = []; var arr = [];
layui.each(files || that.chooseFiles, function(i, item){ layui.each(files || that.chooseFiles, function(i, item){
arr.push(item.name); arr.push(item.name);
}); });
return arr; return arr;
}(); }()
// 回调函数返回的参数 //回调返回的参数
var args = { ,args = {
//预览 //预览
preview: function(callback){ preview: function(callback){
that.preview(callback); that.preview(callback);
}, }
//上传 //上传
upload: function(index, file){ ,upload: function(index, file){
var thisFile = {}; var thisFile = {};
thisFile[index] = file; thisFile[index] = file;
that.upload(thisFile); that.upload(thisFile);
}, }
//追加文件到队列 //追加文件到队列
pushFile: function(){ ,pushFile: function(){
that.files = that.files || {}; that.files = that.files || {};
layui.each(that.chooseFiles, function(index, item){ layui.each(that.chooseFiles, function(index, item){
that.files[index] = item; that.files[index] = item;
}); });
return that.files; return that.files;
}, }
//重置文件 //重置文件
resetFile: function(index, file, filename){ ,resetFile: function(index, file, filename){
var newFile = new File([file], filename); var newFile = new File([file], filename);
that.files = that.files || {}; that.files = that.files || {};
that.files[index] = newFile; that.files[index] = newFile;
} }
}; }
//提交上传 //提交上传
var send = function(){ ,send = function(){
// 上传前的回调 - 如果回调函数明确返回 false则停止上传 //上传前的回调 - 如果回调函数明确返回false则停止上传(#pulls55)
if(options.before && (options.before(args) === false)) return; if(options.before && (options.before(args) === false)) return;
//IE兼容处理 //IE兼容处理
@ -376,14 +356,14 @@ layui.define(['lay','layer'], function(exports){
} }
ajaxSend(); ajaxSend();
}; }
//文件类型名称 //文件类型名称
var typeName = ({ ,typeName = ({
file: '文件', file: '文件'
images: '图片', ,images: '图片'
video: '视频', ,video: '视频'
audio: '音频' ,audio: '音频'
})[options.accept] || '文件'; })[options.accept] || '文件';
//校验文件格式 //校验文件格式