template/common/web/tpl_form_field_multi_image.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<div class="input-group">
    <input type="text" class="layui-input layui-upload-input" readonly="readonly" autocomplete="off" placeholder="请上传图片" value="批量上传图片" id="tplFieldMuitiImageInput_[name]">
    <span class="layui-btn layui-input-group-addon input-group-addon" id="tplFieldMuitiImageBtn_[name]">上传图片</span>
</div>
<div class="input-group">
    <div class="layui-upload-img-boxs" id="tplFieldMuitiImageBox_[name]">
    {php}
        $arr = json_decode('[value]',true);

        if (count($arr)>0) {
            foreach ($arr as $key => $value) {
                echo '<div class="img-box">';
                    if (strpos( $value ,'https:') === false && strpos( $value ,'http:') === false) {
                        echo '<img src="__PUBLIC__'.$value.'" alt="图片">';
                    } else {
                        echo '<img src="'.$value.'" alt="图片">';
                    }
                    echo '<div class="close" onclick="tplFieldMuitiImageRemove_[name](this)">x</div>';
                    echo '<input type="hidden" name="[name][]" value="'.$value.'">';
                echo '</div>';
            }
        }else{
            echo '<div class="img-box empty-box">';
                echo '<img src="__PUBLIC__admin/images/nopic.jpg" alt="图片">';
                echo '<div class="close">x</div>';
            echo '</div>';
        }
    {/php}
    </div>
</div>

<script type="text/javascript">
    $('#tplFieldMuitiImageBtn_[name]').on('click',function(){
        //系统弹框
        new commonModal({
            type:'image',
            multiple:true,
            success:function(obj){

                if($('#tplFieldMuitiImageBox_[name] .empty-box').length>0){
                    $('#tplFieldMuitiImageBox_[name] .empty-box').remove();
                }

                var dom = '';
                for (var i = 0; i < obj.list.length; i++) {
                    dom += '<div class="img-box">';
                        dom += '<img src="__PUBLIC__'+obj.list[i].url+'" alt="图片">';
                        dom += '<div class="close" onclick="tplFieldMuitiImageRemove_[name](this)">x</div>';
                        dom += '<input type="hidden" name="[name][]" value="'+obj.list[i].url+'">';
                    dom += '</div>';
                }

                $('#tplFieldMuitiImageBox_[name]').append(dom);

                // 上传成功的回调函数
                {if strpos('[callback]' ,'[') === false}
                    [callback]&&[callback](obj);
                {/if}
            }
        });