<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/> <script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript" charset="utf-8"></script> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style type="text/css"> .imgDiv{ width: 100px; height: 100px; position: relative; float: left; margin-right: 15px; } .remove{ position: absolute; top: 0; right: 0; padding: 0 4px; background-color: #000; color: #fff; border-radius: 100px; cursor: pointer; } </style> </head> <body> <div class="layui-upload upload"> <div id="" style="overflow: hidden;"> 任务确认单 <button type="button" class="layui-btn" id="upload1"> <i class="layui-icon"></i>上传图片6 </button> <input class="layui-upload-file" type="file" accept="" name="file"> <div class="layui-upload-list"> <div class="" id="demo1"></div> </div> </div> <br /> <div id="" style="overflow: hidden;"> 任务完成证明 <button type="button" class="layui-btn" id="upload2"> <i class="layui-icon"></i>上传图片7 </button> <input class="layui-upload-file" type="file" accept="" name="file"> <div class="layui-upload-list"> <div class="" id="demo2"></div> </div> </div> <br /> <div id=""> <button type="button" class="layui-btn" id="cancelImg" style="background: #d8d9d9;color: #333;">取消</button> <button type="button" class="layui-btn" id="putinImg">提交</button> </div> </div> <!-- <div class="imgDiv"><img src="" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div> --> <script> layui.use(['laypage', 'layer', 'upload'], function () { var laypage = layui.laypage //设置配置环境 , layer = layui.layer , upload = layui.upload //上传图片 var shuzu1 = []; var uploadInst = upload.render({ elem: '#upload1' , url: 'http://totaltest.rdssrqf.com/upload/uploadImages' ,//改成您自己的上传接口 multiple: true //删除就可以单传 , before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { // $('.demo1').attr('src', result); //图片链接（base64） // $('#demo1').append('<img src="'+ result +'" alt="" class="layui-upload-img" style="width:100px;height:100px">'); // $('#demo1').append('<div class="imgDiv"><img src="'+ result +'" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div>'); }); } , done: function (res) { //如果上传失败 if (res.code > 1000) { return layer.msg('上传失败'); }else{ $('#demo1').append('<div class="imgDiv"><img src="'+ res.url +'" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div>'); shuzu1.push(res.url) // console.log(shuzu1,'78') // $("#img11").val(shuzu11) return layer.msg('上传成功'); } //上传成功 } , error: function () { //演示失败状态，并实现重传 // var demoText = $('#demoText'); // demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); // demoText.find('.demo-reload').on('click', function () { // uploadInst.upload(); // }); } }); var shuzu2 = []; var uploadInst = upload.render({ elem: '#upload2' , url: 'http://totaltest.rdssrqf.com/upload/uploadImages' ,//改成您自己的上传接口 multiple: true //删除就可以单传 , before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { // $('.demo1').attr('src', result); //图片链接（base64） // $('#demo1').append('<img src="'+ result +'" alt="" class="layui-upload-img" style="width:100px;height:100px">'); // $('#demo2').append('<div class="imgDiv"><img src="'+ result +'" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div>'); }); } , done: function (res) { //如果上传失败 if (res.code > 1000) { return layer.msg('上传失败'); }else{ $('#demo2').append('<div class="imgDiv"><img src="'+ res.url +'" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div>'); shuzu2.push(res.url) // console.log(shuzu2,'78') // $("#img11").val(shuzu11) return layer.msg('上传成功'); } //上传成功 } , error: function () { //演示失败状态，并实现重传 // var demoText = $('#demoText'); // demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); // demoText.find('.demo-reload').on('click', function () { // uploadInst.upload(); // }); } }); $("body").on('click', '.remove', function(){ //点击删除当前图片 $(this).parent().remove(); }); $("#putinImg").click(function(){ map:[{6:url,url,url},{7:url,url,url}] //这个是传给后台的 map格式 var shuzu1 = new Array(); var shuzu2 = new Array(); var map = new Array(); $("#demo1 .imgDiv").each(function(){ shuzu1.push($(this).find('img').attr("src")); }); $("#demo2 .imgDiv").each(function(){ shuzu2.push($(this).find('img').attr("src")); }); map[6] = shuzu1.toString(); map[7] = shuzu2.toString(); console.log(map,'140') }) $("#cancelImg").click(function(){ }) }); </script> </body> </html>
