layui中的多圖上傳

效果展示：

 

 

1.html部分：

     注：<input> 作為隱藏域，用於保存多圖上傳的資源數組，方便后期進行 form 表單的提交

<input type="hidden" name="imgs" class="multiple_show_img" value=""> 

<div class="layui-upload">
        <button type="button" class="layui-btn" id="multiple_img_upload">多圖片上傳</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            預覽：
            <div class="layui-upload-list" id="div-slide_show"></div>
        </blockquote>
  </div>

2.js部分：

<script>
    var multiple_images = [];

    //單擊圖片刪除圖片 【注冊全局函數】
    function delMultipleImgs(this_img){
        //獲取下標
        var subscript=$("#div-slide_show img").index(this_img);
        //刪除圖片
        this_img.remove();
        //刪除數組
        multiple_images.splice(subscript, 1);
        //重新排序
        multiple_images.sort();
        $('.multiple_show_img').val(multiple_images);
        //返回
        return ;
    }

    layui.use([ 'upload'], function () {

       
        var upload = layui.upload;
        //多圖片上傳
        upload.render({
            elem: '#multiple_img_upload'
            ,url: "/index.php/admin/upload"
            ,multiple: true
            ,before: function(obj){
                //預讀本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#div-slide_show').append('<img src="'+ result +'" alt="'+ file.name +'" title="點擊刪除" class="layui-upload-img" style="width: 100px;height: 100px;" onclick="delMultipleImgs(this)">&nbsp;')
                });
            }
            ,done: function(res){
                //如果上傳成功
                if (res.code == 0) {
                    //追加圖片成功追加文件名至圖片容器
                    multiple_images.push(res.data.src);
                    $('.multiple_show_img').val(multiple_images);
                }else {
                    //提示信息
                   layer.msg(res.message);
                }
            }
        });

    });
</script>

3.PHP后端上傳

public function upload()
{
    $file = request()->file('file');
    $info = $file->validate(['size'=>3145728])->move( '../public/uploads');
    if($info){
        $msg=['code'=>0,'msg'=>'上傳成功','data'=>['src'=>'/uploads/'.str_replace('\\', '/', $info->getSaveName())]];
    }else{
        $msg=['code'=>1,'msg'=>$file->getError()];
    }
    return $msg;
}

原文連接：https://blog.csdn.net/u011415782/article/details/88695219（感謝分享）