登录  /  注册

layui文件上传、预览及修改方法

发布: 2019-12-28 17:13:45
转载
14576人浏览过

layui文件上传、预览及修改方法

单文件上传

1、HTML

<blockquote>
                        <div>
                        <button>
                            <i></i>上传客服二维码<span>*</span>
                        </button>
                        <div>
                            <img  alt="layui文件上传、预览及修改方法" >
                        </div>
                        <div>
                            <button>开始上传</button>
                        </div>
                            <div>温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div>
                    </div>
                    <input>
</blockquote>
登录后复制

2、js部分

layui.use(['form', 'element', 'upload'], function () {
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;

        //单文件示例  选完文件后不自动上传
        var uploadSingle = upload.render({
            elem: '#uploadQR'
            , url: '/web/api/upload/upload?option=4'
            , accept: 'images'  // 允许上传的文件类型
            , size: 2048        // 最大允许上传的文件大小  单位 KB
            , auto: false
            , bindAction: '#startUploadQR'
            , choose: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $('#qrshow').attr('src', result); //图片链接(base64)
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    //上传成功
                    $("#qrInput").val(res.data[0].fp_relative);
                    var startDiv = $('#startDiv');
                    startDiv.html('<span>上传成功</span>');
                } else {
                    this.error(index, upload);
                }
            }
            , error: function (index, upload) {
                //演示失败状态,并实现重传
                var startDiv = $('#startDiv');
                startDiv.html('<span>上传失败</span> <a>重试</a>');
                startDiv.find('.demo-reload').on('click', function () {
                    uploadSingle.upload();
                });
            }
        });
    });
登录后复制

多图片的上传

1、HTML

<blockquote>
                        <div>
                        <button>
                            <i></i>上传商铺图片<span>*</span>
                        </button>
                        <div>
                            <table>
                                <thead>
                                <tr>
                                    <th>图片预览</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <button>开始上传</button>
                            <div>温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1,
                                推荐上传图片长675px,宽450px
                            </div>
                    </div>
                    <input>
</blockquote>
登录后复制

2、js部分

layui.use(['table', 'form', 'element', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;
        
        //多文件列表示例
        var demoListView = $('#imgList');
        var totalArray = new Array();
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            , url: '/web/api/upload/upload?option=3' //上传接口
            , accept: 'images'  // 允许上传的文件类型
            // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式,多个用逗号隔开),
            , size: 5120        // 最大允许上传的文件大小  单位 KB
            , auto: false //选择文件后不自动上传
            , bindAction: '#startUpload' //指向一个按钮触发上传
            , multiple: true   // 开启多文件上传
            , number: 6    //  同时上传文件的最大个数
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                var arr = Object.keys(files);
                totalArray = totalArray.concat(arr);
                // 检查上传文件的个数
                if (totalArray.length '
                            , '<td><img  alt="layui文件上传、预览及修改方法" ></td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>等待上传</td>'
                            , '<td>'
                            , '<button>重传</button>'
                            , '<button>删除</button>'
                            , '</td>'
                            , ''].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                } else {
                    // 超出上传最大文件
                    layer.msg("上传文件最大不超过6个")
                }

            }
            , done: function (res, index, upload) {
                console.log("res", res);
                if (res.code == 0) { //上传成功
                    // 上传成功后将图片路径拼接到input中,多个路径用","分割
                    var inputVal = document.getElementById("imgInput").value;
                    var valData = "";
                    if (inputVal) {
                        valData = inputVal + "," + res.data[0].fp_relative;
                    } else {
                        valData = res.data[0].fp_relative;
                    }
                    document.getElementById("imgInput").value = valData;
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span>上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件

                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span>上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });
登录后复制

添加页面

nbsp;html&gt;


    <meta>
    <title>添加商铺</title>
    <meta>
    <meta>
    <meta>
    <link><div>

    <form>
        <div>
            <div>
                <div>
                    <label>商铺名称<span>*</span></label>
                    <div>
                        <input>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div>
                <div>
                    <label>商铺编号</label>
                    <div>
                        <input>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div>
                <div>
                    <label>详细地址<span>*</span></label>
                    <div>
                        <input>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <label>联系方式<span>*</span></label>
                    <div>
                        <input>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div>
                <div>
                    <blockquote>
                        <div>
                        <button>
                            <i></i>上传客服二维码<span>*</span>
                        </button>
                        <div>
                            <img  alt="layui文件上传、预览及修改方法" >
                        </div>
                        <div>
                            <button>开始上传</button>
                        </div>
                            <div>温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div>
                    </div>
                    <input>
                    </blockquote>

                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <blockquote>
                        <div>
                        <button>
                            <i></i>上传商铺图片<span>*</span>
                        </button>
                        <div>
                            <table>
                                <thead>
                                <tr>
                                    <th>图片预览</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <button>开始上传</button>
                            <div>温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1,
                                推荐上传图片长675px,宽450px
                            </div>
                    </div>
                    <input>
                    </blockquote>

                </div>
            </div>
        </div>
        <div>
            <div>

                <div>
                    <button>确认保存</button>
                </div>
            </div>
        </div>
    </form>


</div>

<script></script><script>
    layui.use([&#39;table&#39;, &#39;form&#39;, &#39;element&#39;, &#39;upload&#39;], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;

        //单文件示例  选完文件后不自动上传
        var uploadSingle = upload.render({
            elem: &#39;#uploadQR&#39;
            , url: &#39;/web/api/upload/upload?option=4&#39;
            , accept: &#39;images&#39;  // 允许上传的文件类型
            , size: 2048        // 最大允许上传的文件大小  单位 KB
            , auto: false
            , bindAction: &#39;#startUploadQR&#39;
            , choose: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $(&#39;#qrshow&#39;).attr(&#39;src&#39;, result); //图片链接(base64)
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    //上传成功
                    $("#qrInput").val(res.data[0].fp_relative);
                    var startDiv = $(&#39;#startDiv&#39;);
                    startDiv.html(&#39;<span style="color: #5FB878;">上传成功&#39;);
                } else {
                    this.error(index, upload);
                }
            }
            , error: function (index, upload) {
                //演示失败状态,并实现重传
                var startDiv = $(&#39;#startDiv&#39;);
                startDiv.html(&#39;<span style="color: #FF5722;">上传失败 <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重试&#39;);
                startDiv.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () {
                    uploadSingle.upload();
                });
            }
        });

        //多文件列表示例
        var demoListView = $(&#39;#imgList&#39;);
        var totalArray = new Array();
        var uploadInst = upload.render({
            elem: &#39;#upload&#39; //绑定元素
            , url: &#39;/web/api/upload/upload?option=3&#39; //上传接口
            , accept: &#39;images&#39;  // 允许上传的文件类型
            // , acceptMime: &#39;image/jpg,image/png&#39;   // (只支持jpg和png格式,多个用逗号隔开),
            , size: 5120        // 最大允许上传的文件大小  单位 KB
            , auto: false //选择文件后不自动上传
            , bindAction: &#39;#startUpload&#39; //指向一个按钮触发上传
            , multiple: true   // 开启多文件上传
            , number: 6    //  同时上传文件的最大个数
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                var arr = Object.keys(files);
                totalArray = totalArray.concat(arr);
                // 检查上传文件的个数
                if (totalArray.length <= 6) {
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $([&#39;<tr id="upload-&#39; + index + &#39;">&#39;
                            , &#39;<td><img src="&#39; + result + &#39;" alt="&#39; + file.name + &#39;"   style="max-width:90%">&#39;
                            , &#39;<td>&#39; + (file.size / 1014).toFixed(1) + &#39;kb&#39;
                            , &#39;<td>等待上传&#39;
                            , &#39;<td>&#39;
                            , &#39;<button class="layui-btn demo-reload layui-hide">重传&#39;
                            , &#39;<button class="layui-btn layui-btn-danger demo-delete">删除&#39;
                            , &#39;&#39;
                            , &#39;&#39;].join(&#39;&#39;));

                        //单个重传
                        tr.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find(&#39;.demo-delete&#39;).on(&#39;click&#39;, function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = &#39;&#39;; //清空 input file 值,以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                } else {
                    // 超出上传最大文件
                    layer.msg("上传文件最大不超过6个")
                }

            }
            , done: function (res, index, upload) {
                console.log("res", res);
                if (res.code == 0) { //上传成功
                    // 上传成功后将图片路径拼接到input中,多个路径用","分割
                    var inputVal = document.getElementById("imgInput").value;
                    var valData = "";
                    if (inputVal) {
                        valData = inputVal + "," + res.data[0].fp_relative;
                    } else {
                        valData = res.data[0].fp_relative;
                    }
                    document.getElementById("imgInput").value = valData;
                    var tr = demoListView.find(&#39;tr#upload-&#39; + index)
                        , tds = tr.children();
                    tds.eq(2).html(&#39;<span style="color: #5FB878;">上传成功&#39;);
                    tds.eq(3).html(&#39;&#39;); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件

                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find(&#39;tr#upload-&#39; + index)
                    , tds = tr.children();
                tds.eq(2).html(&#39;<span style="color: #FF5722;">上传失败&#39;);
                tds.eq(3).find(&#39;.demo-reload&#39;).removeClass(&#39;layui-hide&#39;); //显示重传
            }
        });
        form.on("submit(addObject)", function (data) {
            $.ajax({
                url: "/web/api/seller/add",
                type: "post",
                data: data.field,
                dataType: "json",
                success: function (response) {
                    if (response["code"] == 0) {
                        layer.msg("添加成功", {
                            icon: 1,
                            time: 2500 // 默认三秒
                        }, function () { // 关闭回调,关闭层刷新页面
                            var index = parent.layer.getFrameIndex(window.name);  // 先得到当前iframe层的索引
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(response["msg"], {
                            icon: 1,
                            time: 1500 // 1.5秒,默认三秒
                        });
                    }
                    return false;
                },
                error: function (response) {
                    layer.msg(response["msg"], {
                        icon: 1,
                        time: 1500 // 1.5秒,默认三秒
                    });
                }
            });

            return false; // 关闭表单提交
        });
    });
</script>
登录后复制

编辑页面

nbsp;html&gt;


    <meta>
    <title>编辑商铺</title>
    <meta>
    <meta>
    <meta>
    <link><div>
    <form>
        <input>
        <div>
            <div>
                <div>
                    <label>商铺名称</label>
                    <div>
                        <input>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <label>商铺编号</label>
                    <div>
                        <input>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <label>详细地址</label>
                    <div>
                        <input>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <label>联系方式</label>
                    <div>
                        <input>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div>
                <div>
                    <blockquote>
                        <div>
                            <div>
                                <img  alt="layui文件上传、预览及修改方法" >
                            </div>
                            <div>
                                <div>
                                    <button>
                                        <i></i>修改客服二维码
                                    </button>
                                </div>
                                <div>
                                    <button>开始上传
                                    </button>
                                </div>
                            </div>
                            <div>温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div>
                        </div>
                        <input>
                        <input>
                    </blockquote>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <table>
                                <thead>
                                <tr>
                                    <th>图片预览</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div>
                            <div>
                                <button>
                                    <i></i>添加商铺图片
                                </button>
                            </div>
                            <div>
                                <button>
                                    开始上传
                                </button>
                            </div>
                        </div>
                        <div>温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1,
                            推荐上传图片长675px,宽450px
                        </div>
                    </div>
                    <input>
                    <input>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <button>确认保存</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script></script><!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --><script>
    layui.use([&#39;form&#39;, &#39;element&#39;, &#39;jquery&#39;, &#39;upload&#39;], function () {
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;

        //单文件示例  选完文件后不自动上传
        var uploadSingle = upload.render({
            elem: &#39;#uploadQR&#39;
            , url: &#39;/web/api/upload/upload?option=4&#39;
            , accept: &#39;images&#39;  // 允许上传的文件类型
            , size: 2048        // 最大允许上传的文件大小  单位 KB
            , auto: false
            , bindAction: &#39;#startUploadQR&#39;
            , choose: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $(&#39;#qrshow&#39;).attr(&#39;src&#39;, result); //图片链接(base64)
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    //上传成功
                    $("#qrInput").val(res.data[0].fp_relative);
                    $("#uploadQR").addClass("layui-hide");
                    var startDiv = $(&#39;#startDiv&#39;);
                    startDiv.html(&#39;<span style="color: #5FB878;font-size: 17px;">修改成功&#39;);
                } else {
                    this.error(index, upload);
                }
            }
            , error: function (index, upload) {
                //演示失败状态,并实现重传
                var startDiv = $(&#39;#startDiv&#39;);
                startDiv.html(&#39;<span style="color: #FF5722;">上传失败 <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重试&#39;);
                startDiv.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () {
                    uploadSingle.upload();
                });
            }
        });

        //多文件列表示例
        var demoListView = $(&#39;#imgList&#39;);
        var totalArray = new Array();
        var uploadInst = upload.render({
            elem: &#39;#upload&#39; //绑定元素
            , url: &#39;/web/api/upload/upload?option=3&#39; //上传接口
            , accept: &#39;images&#39;  // 允许上传的文件类型
            // , acceptMime: &#39;image/jpg,image/png&#39;   // (只支持jpg和png格式,多个用逗号隔开),
            , size: 5120        // 最大允许上传的文件大小  单位 KB
            , auto: false //选择文件后不自动上传
            , bindAction: &#39;#startUpload&#39; //指向一个按钮触发上传
            , multiple: true   // 开启多文件上传
            , number: 6    //  同时上传文件的最大个数
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                var totalArray = Object.keys(files);
                // 检查上传文件的个数
                if (totalArray.length < (7 - demoListView.data("choiceTotal"))) {
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $([&#39;<tr id="upload-&#39; + index + &#39;">&#39;
                            , &#39;<td><img src="&#39; + result + &#39;" alt="&#39; + file.name + &#39;"   style="max-width:90%">&#39;
                            , &#39;<td>等待上传&#39;
                            , &#39;<td>&#39;
                            , &#39;<button class="layui-btn layui-btn-sm demo-reload layui-hide">重传&#39;
                            , &#39;<button class="layui-btn layui-btn-sm layui-btn-danger demo-delete">删除&#39;
                            , &#39;&#39;
                            , &#39;&#39;].join(&#39;&#39;));

                        //单个重传
                        tr.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find(&#39;.demo-delete&#39;).on(&#39;click&#39;, function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadInst.config.elem.next()[0].value = &#39;&#39;; //清空 input file 值,以免删除后出现同名文件不可选
                            totalArray.splice(totalArray.indexOf(index), 1);
                        });
                        demoListView.append(tr);
                    });
                } else {
                    // 超出上传最大文件
                    layer.msg("上传文件最大不超过6个");
                    totalArray.pop();
                }
            }
            , done: function (res, index, upload) {
                if (res.code == 0) { //上传成功
                    // 上传成功后将图片路径拼接到input中,多个路径用","分割
                    var inputVal = document.getElementById("imgInput").value;
                    var valData = "";
                    if (inputVal) {
                        valData = inputVal + "," + res.data[0].fp_relative;
                    } else {
                        valData = res.data[0].fp_relative;
                    }
                    document.getElementById("imgInput").value = valData;
                    var tr = demoListView.find(&#39;tr#upload-&#39; + index)
                        , tds = tr.children();
                    tds.eq(1).html(&#39;<span style="color: #5FB878;">上传成功&#39;);
                    tds.eq(2).html(&#39;&#39;); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find(&#39;tr#upload-&#39; + index)
                    , tds = tr.children();
                tds.eq(1).html(&#39;<span style="color: #FF5722;">上传失败&#39;);
                tds.eq(2).find(&#39;.demo-reload&#39;).removeClass(&#39;layui-hide&#39;); //显示重传
            }
        });

        // 监听修改客服二维码事件
        $("#uploadQR").on("click", function () {
            $("#startUploadQR").removeClass(&#39;layui-hide&#39;);
        });

        // 处理图片的修改
        demoListView.on(&#39;click&#39;, &#39;.edit-btn&#39;, function () {
            var csid = $(this).attr("csid");
            var startid = $(this).attr("startid");
            var currentIndex = parseInt(csid.split("_")[1]);
            var $currentTr = $(this).parent().parent();
            $(this).addClass("layui-hide");
            $("#" + csid).removeClass("layui-hide");
            $("#" + startid).removeClass("layui-hide");
            var uploadEdit = upload.render({
                elem: &#39;#&#39; + csid
                , url: &#39;/web/api/upload/upload?option=3&#39;
                , accept: &#39;images&#39;  // 允许上传的文件类型
                , size: 2048        // 最大允许上传的文件大小  单位 KB
                , auto: false
                , bindAction: &#39;#&#39; + startid
                , choose: function (obj) {
                    //预读本地文件示例,不支持ie8
                    obj.preview(function (index, file, result) {
                        $currentTr.children().eq(0).html(&#39;<img src="&#39; + result + &#39;" alt=""   style="max-width:90%">&#39;) //图片链接(base64)
                    });
                }
                , done: function (res, index, upload) {
                    if (res.code == 0) {
                        //上传成功
                        var InputTag = $("#imgInput");
                        var oldInputStrList = InputTag.val().split(",");
                        oldInputStrList[currentIndex] = res.data[0].fp_relative;
                        var newInputStr = oldInputStrList.join(",");
                        InputTag.val(newInputStr);
                        $currentTr.children().eq(1).text("修改成功");
                        $currentTr.children().eq(2).html("");
                    } else {
                        this.error(index, upload);
                    }
                }
                , error: function (index, upload) {
                    //演示失败状态,并实现重传
                    var fileHtml = &#39;<span style="color: #FF5722;">上传失败 <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重试&#39;;
                    $currentTr.children().eq(2).html(fileHtml);
                    $currentTr.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () {
                        uploadEdit.upload();
                    });
                }
            });
        });

        // 处理图片的删除
        demoListView.on("click", &#39;.delete-btn&#39;, function () {
            var delid = this.id;
            var currentDelIndex = parseInt(delid.split("_")[1]);
            var theCurrentTr = $(this).parent().parent();
            // 更新表格中当前行后面每一行的序号
            // 找到当前行后面的每一行
            theCurrentTr.nextAll().each(function () {
                // each中的this和外面的this不一样了!
                var oldCsid = $(this).children().eq(2).find(".edit-btn").attr("csid");
                var oldStarid = $(this).children().eq(2).find(".edit-btn").attr("startid");
                var oldChoiceid = $(this).children().eq(2).find(".choice-btn").attr("id");
                var oldUploadid = $(this).children().eq(2).find(".upload-btn").attr("id");
                var oldDelid = $(this).children().eq(2).find(".delete-btn").attr("id");
                if (oldDelid && oldCsid) {
                    $(this).children().eq(2).find(".edit-btn").attr("csid", oldCsid.split("_")[0] + "_" + (oldCsid.split("_")[1] - 1));
                    $(this).children().eq(2).find(".edit-btn").attr("startid", oldStarid.split("_")[0] + "_" + (oldStarid.split("_")[1] - 1));
                    $(this).children().eq(2).find(".choice-btn").attr("id", oldChoiceid.split("_")[0] + "_" + (oldChoiceid.split("_")[1] - 1));
                    $(this).children().eq(2).find(".upload-btn").attr("id", oldUploadid.split("_")[0] + "_" + (oldUploadid.split("_")[1] - 1));
                    $(this).children().eq(2).find(".delete-btn").attr("id", oldDelid.split("_")[0] + "_" + (oldDelid.split("_")[1] - 1));
                }
            });
            // 找到当前行,删除
            theCurrentTr.remove();
            // 修改新的input框中的值
            var delInputTag = $("#imgInput");
            var oldDelInputStrList = delInputTag.val().split(",");
            oldDelInputStrList.splice(currentDelIndex, 1);
            var delnewInputStr = oldDelInputStrList.join(",");
            delInputTag.val(delnewInputStr);
            // 修改全局可上传文件的总个数
            var $currentTotal = demoListView.data("choiceTotal");
            demoListView.data("choiceTotal", $currentTotal - 1);
        });

        // 填充管理员详情
        $.ajax({
            url: "/web/api/seller/detail?seller_id={{seller_id}}",
            type: "get",
            dataType: "json",
            success: function (response) {
                console.log(response);
                $("#qrshow").attr("src", response.data.qrcode_url);
                var faceList = response.data.face_url_list;
                demoListView.data("choiceTotal", faceList.length);
                if (faceList) {
                    for (var i = 0; i < faceList.length; i++) {
                        var trEle = document.createElement("tr");
                        var trHtml = &#39;<td><img src="&#39; + faceList[i] + &#39;" alt=""   style="max-width:90%">&#39;
                            + &#39;<td>等待修改<td><button type="button" class="layui-btn layui-btn-sm edit-btn" csid="choice_&#39; + i
                            + &#39;" startid="startUpload_&#39; + i + &#39;">修改<button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-hide choice-btn" id="choice_&#39; + i
                            + &#39;" style="margin-right: 10px;">选择图片<button type="button" class="layui-btn layui-btn-sm layui-hide upload-btn" id="startUpload_&#39; + i + &#39;">上传&#39; +
                            &#39;<button type="button" class="layui-btn layui-btn-sm delete-btn" id="delete_&#39; + i + &#39;">删除&#39;;
                        trEle.innerHTML = trHtml;
                        $("#imgList").append(trEle);
                    }
                }
                form.val("updateForm", {
                    "seller_id": response.data.id,
                    "name": response.data.name,
                    "code": response.data.code,
                    "address": response.data.address,
                    "contact": response.data.contact,
                    "cli_qrcode": response.data.cli_qrcode,
                    "old_cli_qrcode": response.data.cli_qrcode,
                    "face_img": response.data.face_img,
                    "old_face_img": response.data.face_img
                });
                form.render();
            }
        });

        // 绑定提交事件
        form.on("submit(addObject)", function (data) {
            $.ajax({
                url: "/web/api/seller/update",
                type: "post",
                data: data.field,
                dataType: "json",
                success: function (response) {
                    if (response["code"] == 0) {
                        layer.msg("更新成功", {
                            icon: 1,
                            time: 1500 // 1.5秒,默认三秒
                        }, function () { // 关闭回调,关闭层刷新页面
                            var index = parent.layer.getFrameIndex(window.name);  // 先得到当前iframe层的索引
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(response["msg"], {
                            icon: 1,
                            time: 1500 // 1.5秒,默认三秒
                        });
                    }

                    return false;
                },
                error: function (response) {
                    layer.msg(response["msg"], {
                        icon: 1,
                        time: 1500 // 1.5秒,默认三秒
                    });
                    return false;
                }
            });

            return false; // 关闭表单提交(注意:此处不能省略,此处不能省略,此处不能省略。。。 否则页面刷新有问题)
        });
    });


</script>
登录后复制

更多layui知识请关注layui使用教程栏目。

以上就是layui文件上传、预览及修改方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号