layui实现多图片上传与多图片显示，更新展示图片

更新展示图片 value传值即可显示

<div class="layui-input-block">
   <input name="application" type="hidden" value="{$data.application}">
    <script>$('[name="application"]').uploadMultipleImage()</script>
    <p class="help-block"><span style="color: #d43f3a">*注</span>&nbsp;上传图片的最佳尺寸：200像素*640像素，格式png，jpeg，jpg，gif；大小不超过 <5Mb</p>
</div>

多图片显示

<div class="layui-input-block" style="margin: 30px 0">
    {foreach $application as $key=>$value}
    <img data-tips-image style="top: 0;left: 130px; width:126px;height:126px" src="{$value}" class="margin-right-5 text-top">
    {/foreach}
</div>

效果图

以模态框形式的展示写法

<a data-title="合同扫描件预览" data-tips-text="合同扫描件预览"
  data-modal="{:url('PurchaseContract/scanning_file')}?id={$vo['id']}"
  class="layui-badge layui-bg-green margin-left-5">
   合同扫描件
</a>

前端代码

<style type="text/css">
    .form_left{text-align: left;}
</style>
<form onsubmit="return false;" action="{:request()->url()}" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off" id="file">
    <div class="think-box-shadow">
        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs12" style="text-align: right">
                {notempty name='$id'}<input type='hidden' value='{$id}' name='contract_id'>{/notempty}
                <button class="layui-btn layui-btn-warm layui-icon layui-icon-console" type='button' id="submit">上传合同扫描件</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </label>
        </div>
        <div class="hr-line-dashed"></div>
        <div class="layui-form-item">
            <label class="layui-form-label">合同扫描件<br><span class="nowrap color-desc">效果图</span></label>
            <div class="layui-input-block">
                <input name="design_pic" type="hidden" value="">
                <script>$('[name="design_pic"]').uploadMultipleImage()</script>
                <p class="help-block"><span style="color: #d43f3a">*注</span>&nbsp;上传图片的最佳尺寸：200像素*640像素，格式png，jpeg，jpg，gif；大小不超过 <5Mb</p>
            </div>
        </div>
    </div>
</form>
<script>
    window.form.render();
    //获取点击事件
    $('#submit').on('click',function(){
        var design_pic = $('input[name="design_pic"]').val();
        if($.trim(design_pic)==''){
            layer.msg('请选择扫描图片');
            return false;
        }
        $.post("{:url('PurchaseContract/signingPic')}",$('#file').serialize(),function(data){
            if(data.status==1){
                layer.msg(data.info);
                setTimeout(function(){
                    $('.layui-layer-close ').click();
                },5000);//1秒后可点击
                //刷新当前页
                window.location.reload();
            }
        })
    });
</script>

多图片上传显示结果页

多图片的展示html代码

<div class="layui-form-item">
    <label class="layui-form-label">合同扫描件<br>
        <span class="nowrap color-desc">
            效果图
        </span>
    </label>
    <div class="layui-input-block">
        <input name="design_pic" type="hidden" value="{$vo.scanning_copy}">
        <script>$('[name="design_pic"]').uploadMultipleImage()</script>
    </div>
</div>

多图片展示显示结果页