需求：当我在使用layui框架上传多图时，我想动态给每一张图都把它的名称传给后台
data: {id: function(){return $('#id').val();} }这是官网给的动态传参的方法
我自己根据官网给的案例设置
data:{filesIndex:function(index, file){return file.name}},
//file.name 是我们上传图片的名称完整代码
var filesName = ''layui.use(['form','upload','element', 'layer'],function(){var form = layui.form;var upload = layui.upload;var element = layui.element;var $ = layui.$;// 制作多文件上传表格var fileNum = 0;var fileNumer =0;var files = []upload.render({elem: '#ID-upload-demo-files',elemList: $('#ID-upload-demo-files-list'), // 列表元素对象url: 'http://192.168.5.38:8084/上传图片的接口地址',//实际使用时改成您自己的上传接口即可。accept: 'file',multiple: true,number:9,auto: true,data:{filesIndex:function(index, file){return file.name}},bindAction: '#ID-upload-demo-files-action',before: function(obj){files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列// 读取本地文件obj.preview(function(index, file, result){delete files[index]; // 删除对应的文件})},done: function(res, index, upload){ // 成功的回调var index = index.substring(getLastDotIndex(index)+1)var that = this;var filesName = res.att_enamevar filesImgUrl = ''var nameStr = filesName.substring(getLastDotIndex(filesName)+1)if(nameStr =='jpg' || nameStr=='png' || nameStr=='gif' || nameStr=='jpeg'){filesImgUrl = 'http://192.168.5.38:8084/sh/files'+res.att_path+res.att_ename}else if(nameStr=='mp4'){filesImgUrl = 'images/mp4.png'}else if(nameStr=='doc'){filesImgUrl = 'images/word.png'}else if(nameStr=='xlsx'){filesImgUrl = 'images/exl.png'}else if(nameStr=='ppt'){filesImgUrl = 'images/ppt.png'}else if(nameStr=='pdf'){filesImgUrl = 'images/pdf.png'}else if(nameStr=='zip' || nameStr=='rar'){filesImgUrl = 'images/zip.png'}else{filesImgUrl = 'images/pdf.png'}function getLastDotIndex(str) {return str.lastIndexOf('.');}var html=''html+='<li class="bui-btn bui-box">'+'<input name="file' + fileNum + '_title" id="file' + fileNum + '_title" value="' + res.filesIndex + '" type="hidden">'+'<input name="file' + fileNum + '_url" id="file' + fileNum + '_url" class="filesUrl" value="'+res.att_path+res.att_ename+'" type="hidden">'+'<div class="bui-thumbnail">'+'<img src="'+filesImgUrl+'">'+'</div>'+'<div class="span1">'+'<a class="layui-btn layui-btn-xs layui-btn-danger demo-delete" data-name="'+res.att_ename+'">删除</a>'+'<h3 class="item-title">'+res.filesIndex+'</h3>'+'<div class="layui-progress" lay-filter="100%"><div class="layui-progress-bar" lay-percent="100%"></div></div>'+'</div></li>'$('#ID-upload-demo-files-list').append(html);element.render('progress'); // 渲染新加的进度条组件fileNum= fileNum+1fileNumer = fileNumer+1$('.fileNumer').val(fileNumer)$(document).on('click','.demo-delete',function(){delete files[index]; // 删除对应的文件$(this).parent().parent('li').remove()var files_listSize = $('#ID-upload-demo-files-list').find('li.bui-box').length;fileNumer=fileNumer--if(files_listSize==0){$('.fileNumer').val('');fileNumer=0}else{fileNumer = files_listSize$('.fileNumer').val(fileNumer);}})return;this.error(index, upload);},allDone: function(obj){ // 多文件上传完毕后的状态回调 // console.log(obj)},error: function(index, upload){ // 错误回调var that = this;},progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比}});/这是最终提交的代码/form.on('submit(formDemo)', function(data){var field = data.field;$('.submitForm').addClass('layui-btn-disabled');var index = layer.load(3, {shade: true},);setTimeout(function(){$.ajax({type:"post",url:"http://192.168.5.38:8084/sh/front/提交接口地址",async:true,data:field,success(res){var ress = JSON.parse(res)if(ress.result=="success"){layer.close(index);layer.msg('提交成功');}setTimeout(function(){location.reload();},800)},error(err){layer.close(index);layer.msg('提交错误');$('.submitForm').removeClass('layui-btn-disabled');}});},1000);return false;});/// });
