layui表格实现上传多张图片和显示多张图片
正文
上传多张图片
html代码:
<div class="layui-form-item"> <label class="layui-form-label">上传照片</label> <div class="layui-input-inline uploadHeadImage"> <div class="layui-upload-drag" id="headImg"> <i class="layui-icon"></i> <p>点击上传图片,或将图片拖拽到此处</p> </div> </div> 预览图: <div class="layui-upload-list" id="demo2"></div> <input type="text" id="imgUrls" name="imgUrls" style="display: none;" class="layui-input"> </div>
Js代码:
layui.use(["jquery", "upload", "form", "layer", "element"], function () { var $ = layui.$, element = layui.element, layer = layui.layer, upload = layui.upload, form = layui.form; var s = ""; //拖拽上传 var uploadInst = upload.render({ elem: '#headImg' , url: 'http://localhost:8839/NO1/FastDFS//UploadPhoto' , size: 1000 , multiple: true , number: 7 , before: function (obj) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { // $('#demo1').attr('src', result); //图片链接(base64) $('#demo2').append('<img src="' + result + '" alt="' + file.name + '"height="100px" width="100px" class="layui-upload-img uploadImgPreView">') }); } , done: function (res) { if (s == "") { s = JSON.stringify(res); } else { s = s + "," + JSON.stringify(res); }; localStorage.setItem("address1", s); } , error: function () { demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); });
实现的效果
表格显示多张照片
显示表格代码:
<table id="demo" lay-filter="test"></table> <script> layui.use('table', function () { var table = layui.table; var organizationId = localStorage.getItem("organizationid1"); var organizationName0 = localStorage.getItem("organizationName0"); //第一个实例 table.render({ elem: '#demo' , height: 500 , where: { "organizationid": "5ZAhr6r4mziutumsfX4L6m" } , url: 'http://localhost:8839/No.1/ExhibitionRecordController/getinfo' //数据接口 , parseData: function (res) { console.log(res); if (res.length == 0) { return { "code": 0, "msg": "", "data": res } } else { return { "code": 0, "msg": "", "count": res[0].total, "data": res } } } , groups: 10 , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] , cols: [[ //表头 { field: 'userName', title: '姓名', width: 140, fixed: 'left' } , { field: 'organizationId', title: '期数', templet: organizationName0, width: 140 } , { field: 'exhibitionYear', title: '年份', width: 140, sort: true } , { field: 'parentsAttend', title: '家长是否来', width: 140 } , { field: 'parentsWhole', title: '全程参展', width: 140 } , { field: 'exhibitionUrl', title: '照片', align: 'center', templet: '#showScreenhost', width: 400 } , { field: 'remark', title: '审核状态', templet: '<div>未审核</div>', width: 140 } ]] , page: true //开启分页 , even: true , id:'tableReward' }); });
循环显示多张照片代码:
<script id="showScreenhost" type="text/html"> {{# var srr=d.exhibitionUrl.split(","); for(var j in srr) { srr[j] }} <div style="margin:0 10px; display:inline-block !important; display:inline; max-width:70px; max-height:50px;"> <img style=" max-width:70px; max-height:50px;" src="{{srr[j]}}" /> </div> {{# } }} </script>
实现的效果:
总结
1.采用了字符串转为数组显示大于1个以上的图片
var srr=d.exhibitionUrl.split(",");
for(var j in srr) { srr[j] }}
<img style=" max-width:70px; max-height:50px;" src="{{srr[j]}}
2.layui上传多个照片,将url地址拼接。
3.多多思考,多多查资料。
转载:https://blog.csdn.net/hdy14/article/details/90040381
-----------------------------------------------------自己项目------------------------------------------------------------------
,{field:'send_img', title:'图片地址', width:250,height:100,templet:'#showScreenhost',}
<script id="showScreenhost" type="text/html"> {{# var srr = JSON.parse(d.send_img); for(var j in srr) { srr[j] }} <div style="margin:0 10px; display:inline-block !important; display:inline; max-width:70px; max-height:50px;"> <img style=" max-width:70px; max-height:50px;" src="http://{{srr[j]}}" /> </div> {{# } }} </script>
<script id="showScreenhost" type="text/html"> {{# var srr = JSON.parse(d.send_img); for(var j in srr) { srr[j] }} <div style="margin:0 10px; display:inline-block !important; display:inline; max-width:70px; max-height:50px;"> <img onclick="enlarge_img1('http://{{srr[j]}}')" style=" max-width:70px; max-height:50px;" src="http://{{srr[j]}}" /> </div> {{# } }} </script>