layui 循环列中上传图片以及鼠标放上图片放大处理

最新推荐文章于 2024-04-14 23:08:08 发布

JavaPhp开发

最新推荐文章于 2024-04-14 23:08:08 发布

阅读量604

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/MLONGKRT/article/details/90648393

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html代码：

                {volist name="shop_all" key="k" id="vo"}
                <tr>
                    <td>{$vo.id}</td>
                    <td>{$vo.goods_name}</td>
                    <td>{$vo.name}</td>
                    <td>{$vo.goods_price}</td>
                    <td>
                        <input type="hidden" name="shopid" value="{$vo.id}">
                        <img src="{$vo.goods_pic}" class="layui-upload-img" data-shopid="{$vo.id}" id="shop_{$vo.id}">
                        <button type="button" class="layui-btn layui-btn-danger" data-shopid="{$vo.id}" id="upload{$vo.id}"><i class="layui-icon"></i>上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="sc_{$vo.id}">
                            <p id="demoText"></p>
                        </div>
                        <div class="layui-inline layui-word-aux">
                            这里暂时不限制图片大小
                        </div>
                    </td>
                    <td>{$vo.goods_size}</td>
                    <td>
                        <a data="{$vo.id}" class="layui-btn layui-btn-mini layui-btn-normal edit"><i class="layui-icon">&#xe642;</i>编辑</a>
                        <a data="{$vo.id}" class="layui-btn layui-btn-danger layui-btn-mini del"><i class="layui-icon">&#xe640;</i>删除</a>
                    </td>
                </tr>
                {/volist}

JS代码：

<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery
        $(".layui-btn-danger").on("click",function(){
            $(this).addClass("clic").siblings().removeClass("click")
        })
    })
    layui.use(['upload'], function () {
            var $ = layui.jquery
            ,upload = layui.upload
        //普通图片上传
        upload.render({
            elem:".layui-btn-danger"
            ,url: "{:url('Shop/uploads')}"
            ,data:{"shopid":function(){
              return $(".clic").attr("data-shopid")
            }}
            ,done: function(res){
                console.log(res);
                //如果上传失败
                if(res.code != 1){
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.code == 1){
                    $("#shop_"+res.shopid).attr("src",res.filename)
                    return layer.msg("上传成功");
                }
            }
            ,error: function(){
                console.log("如果上传失败2");
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
})