layui d多文件上传

借阅

http://www.layui.com/demo/upload.html

前端代码

<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>

<thead>

</tr></thead>

<tr>

</tr>

</volist>

</notempty>

</tbody>

</table>

</div>

</div>

</form>

JS 代码

layui.use('upload', function(){

var upload = layui.upload;

console.log(upload);

//执行实例

//多文件列表示例

var demoListView = $('#demoList')

,uploadListIns = upload.render({

elem: '#testList'

,url: '{:U("Admana/uploadAll")}'

,accept: 'file'

,multiple: true

,auto: false

,bindAction: '#testListAction'

,choose: function(obj){

var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

//读取本地文件

obj.preview(function(index, file, result){

var tr = $(['<tr id="upload-'+ index +'">'

,'<td><img src='+result+' style="width:60px;height:60px"></td>'

,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'

,'<td>等待上传</td>'

,'<td>'

// ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'

,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'

,'</td>'

,'</tr>'].join(''));

//单个重传

tr.find('.demo-reload').on('click', function(){

obj.upload(index, file);

});

//删除

tr.find('.demo-delete').on('click', function(){

delete files[index]; //删除对应的文件

tr.remove();

uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选

});

demoListView.append(tr);

});

}

,done: function(res, index, upload){

if(res.img != ''){

var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();

tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');

tds.eq(3).html(''); //清空操作

var str = '<input type="hidden" name="photo[]" value='+res.img+'>';

$('#demoList').append(str);

return delete this.files[index]; //删除文件队列已经上传成功的文件

}

this.error(index, upload);

}

,error: function(index, upload){

var tr = demoListView.find('tr#upload-'+ index)

,tds = tr.children();

tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');

tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传

}

});

转载于:https://www.cnblogs.com/JdsyJ/p/8671022.html

layui d多文件上传相关推荐

layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
layui实现文件压缩上传_基于SSM框架、Layui的多文件上传、包括图片，压缩包，音频等文件（与数据库挂钩） - 爱秧博客...
写在前面:当初为了实现一个多文件上传可是费了一番功夫,经过我日日夜夜的百度咨询,写了好几种方法,最终还是没能解决问题.我可以很负责任的告诉你,你去百度上不管你形容有多好,只要是涉及多文件,就会查到Mu ...
layUi upload单文件上传，重复上传的问题
今天遇到个问题,layUi upload单文件上传,选择两个不同文件时,第二次点击上传按钮还没选择上传,会把第一次上传的文件再上传一次 .在网上查到了答案,记录一下 //单个上传 upload.ren ...
layui+strust2多文件上传
关于layui+strust2文件上传,action参数无需改变不论你上传多少个文件,当你把断点打在你的上传接口时,永远只会进入一次 !!!但是,如果你上传3个文件,日志输出会总共执行执行3次所以 ...
SpringMVC +layui 实现多文件上传，附加进度条
首先在进行文件上传操作的时候,你得对layui 中文件上传的一些参数先了解一下,不要网上复制粘贴,起码你要对layui 文件上传的必备参数做一些大致掌握,也是自己学习. (1) 首先你得引入layui ...
layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...
首先,这是一个坑,大坑,网上一大堆写的云里雾里,不知所以,转了一圈,除了copy就是copy,Jesus God,花了一晚上,走通了这个坑,话不多说,直接解决 layui版本: layui-v2.5. ...
layui 多个文件上传控件整合缩减代码
// 图片上传 upload.render({elem: '.upload-img' // 点击上传的按钮统一使用该类,url: "{:url('image/upload')}", ...
layui表单加文件 php_layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例...
本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作.分享给大家供大家参考,具体如下: layui框架是1.0.9版本.. 首先html页面代码如下: js代码如下: l ...
layui如何集成文件服务器,layui使用upload组件实现文件上传功能
layui使用upload组件实现文件上传功能发布时间:2020-05-22 17:25:25 来源:亿速云阅读:309 作者:鸽子背景:页面上一个按钮,点击弹出上传框,从按钮的方法代码开始写: ...

layui d多文件上传

layui d多文件上传相关推荐

最新文章

热门文章