tp5多图片上传

    .pic-more {
        width: 100%;
        margin: 10px 0px 0px 0px;
    }

    .pic-more li {
        width: 90px;
        float: left;
        margin-right: 20px;
    }

    .pic-more li .layui-input {
        display: initial;
    }

    .pic-more li a {
        position: absolute;
        top: 0;
        display: block;
    }

    .pic-more li a i {
        font-size: 24px;
        background-color: #008800;
    }

    #slide-pc-priview .item_img img {
        width: 90px;
        height: 90px;
    }

    #slide-pc-priview li {
        position: relative;
    }

    #slide-pc-priview li .operate {
        color: #000;
        display: none;
    }

    #slide-pc-priview li .toleft {
        position: absolute;
        top: 40px;
        left: 1px;
        cursor: pointer;
        width:18px;
        height:18px;
        background-color: red;
        border-radius:5px;
        color:white;
        line-height: 18px;
        text-align: center;
    }

    #slide-pc-priview li .toright {
        position: absolute;
        top: 40px;
        right: 1px;
        cursor: pointer;
        width:18px;
        height:18px;
        background-color: red;
        border-radius:5px;
        color:white;
        line-height: 18px;
        text-align: center;
    }

    #slide-pc-priview li .close {
        background-color: red;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        position: absolute;
        top: -10px;
        right: -5px;
        cursor: pointer;
        font-size: 20px;
        color:white;
        line-height: 20px;
        text-align: center;

    }
 <div class="layui-col-md10">
                                    <div class="layui-col-md6">
                                        <div class="layui-row" >

                                            <div class="layui-input-block"  style="margin-left: 0px;width: 70%;" >
                                                <div class="layui-upload" >
                                                    <button type="button"
                                                            class="layui-btn  layui-btn-primary pull-left"

                                                            id="slide-pc" >上传
                                                    </button>
                                                    <div class="pic-more">
                                                        <ul class="pic-more-upload-list"
                                                            id="slide-pc-priview">
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <!--<p id="demoText"></p>-->
                                    <div class="layui-col-md6">
                                        <img class="layui-upload-img" src="/static/image/id_example.png"
                                             onerror="this.src='/static/image/nopic.jpg'" alt="证件示例">
                                    </div>
                                    <div class="layui-col-md6 layui-form-mid layui-word-aux">
                                        支持jpg、jpeg、png、gif,每张照片最大不超过1mb。
                                    </div>
                                </div>
```html

```javascript
<script>
//放大图片
    function show_img(t) {
        var t = $(t).find("img");
        //页面层
        layer.open({
            title:"图片详情",
            type: 1,
            skin: 'none', //加上边框
            area: ['50%', '65%'], //宽高
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
        });
    }

//上传图片
    layui.use('upload', function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        upload.render({
            elem: '#slide-pc',
            url: "{:url('com/Upload/upload_img')}",
            size: 50000,
            exts: 'jpg|png|jpeg',
            multiple: true,
            before: function (obj) {
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            },

            done: function (res) {
                layer.close(layer.msg());//关闭上传提示窗口
                if (res.status === 0) {
                    return layer.msg(res.message);
                }
                //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');
                $('#slide-pc-priview').append(`<li class="item_img">
                    <div class="operate">
                    <i class="toleft layui-icon">&#xe603;</i>
                    <i class="toright layui-icon">&#xe602;</i>
                    <i class="layui-icon close" >&#xe640;</i>
                    </div>
                    <div οnclick="show_img(this)"><img src="${res.showPath}" class="img" ></div>
                    <input type="hidden" name="pc_src[]" value="${res.path}" />
                    </li>`);
            }
        });
    });

    //点击多图上传的X,删除当前的图片
    $("body").on("click", ".close", function () {
        $(this).closest("li").remove();
    });

    //多图上传点击<>左右移动图片
    $("body").on("click", ".pic-more ul li .toleft", function () {
        var li_index = $(this).closest("li").index();
        if (li_index >= 1) {
            $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index) - 1));
        }
    });

    $("body").on("click", ".pic-more ul li .toright", function () {
        var li_index = $(this).closest("li").index();
        $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index) + 1));
    });

</script>

    //图片上传
    public function upload_img()
    {
        $file = request()->file('file'); // 获取上传的文件
        if ($file == null) {
            exit(json_encode(array('code' => 1, 'msg' => '未上传图片', 'data' => $_FILES)));
        }
        // 获取文件后缀
        $temp = explode(".", $_FILES["file"]["name"]);
        $extension = end($temp);
        // 判断文件是否合法
        if (!in_array($extension, array("gif", "jpeg", "jpg", "png"))) {
            exit(json_encode(['code' => 1, 'msg' => '上传图片不合法']));
        }
        $path = config('ImgPath');
        $prefix = config('imgprefix');
        $info = $file->move($path . $prefix); // 移动文件到指定目录 没有则创建

        $img = $info->getSaveName();

        return json(['code' => 0, 'path' => $prefix . '/' . $img, "showPath" => tostatic($prefix . '/' . $img)]);
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值