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>