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

前端  /  管理员 发布于 5年前   1003

单文件上传

1、HTML

<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">                        <div id="uploadQRcode" class="layui-upload">                        <button type="button" class="layui-btn" id="uploadQR">                            <i class="layui-icon">&#xe67c;</i>上传客服二维码<span style="color: red;font-size: 20px;">*</span>                        </button>                        <div class="layui-upload-list">                            <img id="qrshow" src="" alt="" class="layui-upload-img"                                 style="height: 100px;width:100px;border:1px solid black;">                        </div>                        <div id="startDiv">                            <button type="button" class="layui-btn" id="startUploadQR">开始上传</button>                        </div>                            <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div>                    </div>                    <input type="text" name="cli_qrcode" id="qrInput" style="display: none;" lay-verify="required"></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 style="color: #5FB878;">上传成功</span>');                } else {                    this.error(index, upload);                }            }            , error: function (index, upload) {                //演示失败状态，并实现重传                var startDiv = $('#startDiv');                startDiv.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重试</a>');                startDiv.find('.demo-reload').on('click', function () {                    uploadSingle.upload();                });            }        });    });

多图片的上传

1、HTML

<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">                        <div id="uploadImg" class="layui-upload">                        <button type="button" class="layui-btn" id="upload">                            <i class="layui-icon">&#xe67c;</i>上传商铺图片<span style="color: red;font-size: 20px;">*</span>                        </button>                        <div class="layui-upload-list">                            <table class="layui-table" style="text-align: center;">                                <thead>                                <tr>                                    <th style="text-align: center;">图片预览</th>                                    <th style="text-align: center;">大小</th>                                    <th style="text-align: center;">状态</th>                                    <th style="text-align: center;">操作</th>                                </tr>                                </thead>                                <tbody id="imgList"></tbody>                            </table>                        </div>                        <button type="button" class="layui-btn" id="startUpload">开始上传</button>                            <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1,                                推荐上传图片长675px,宽450px                            </div>                    </div>                    <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required"></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 <= 6) {                    //读取本地文件                    obj.preview(function (index, file, result) {                        var tr = $(['<tr id="upload-' + index + '">'                            , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="height: 66px;width:100px;"></td>'                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'                            , '<td>等待上传</td>'                            , '<td>'                            , '<button class="layui-btn demo-reload layui-hide">重传</button>'                            , '<button class="layui-btn layui-btn-danger demo-delete">删除</button>'                            , '</td>'                            , '</tr>'].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 style="color: #5FB878;">上传成功</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 style="color: #FF5722;">上传失败</span>');                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传            }        });    });

添加页面

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>添加商铺</title>    <meta name="renderer" content="webkit">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">    <link rel="stylesheet" href="{{static_url('layui/css/layui.css')}}" media="all"></head><body><div style="margin-top: 30px;">    <form class="layui-form layui-form-pane">        <div>            <div class="layui-col-xs8 layui-col-xs-offset2">                <div>                    <label>商铺名称<span style="color: red;font-size: 20px;">*</span></label>                    <div>                        <input type="text" lay-verify="required" name="name" autocomplete="off">                    </div>                </div>            </div>        </div>        <div>            <div class="layui-col-xs8 layui-col-xs-offset2">                <div>                    <label>商铺编号</label>                    <div>                        <input type="text" name="code" autocomplete="off">                    </div>                </div>            </div>        </div>        <div>            <div class="layui-col-xs8 layui-col-xs-offset2">                <div>                    <label>详细地址<span style="color: red;font-size: 20px;">*</span></label>                    <div>                        <input type="text" name="address" required lay-verify="required" autocomplete="off"                               class="layui-input">                    </div>                </div>            </div>        </div>        <div>            <div class="layui-col-xs8 layui-col-xs-offset2">                <div>                    <label>联系方式<span style="color: red;font-size: 20px;">*</span></label>                    <div>                        <input type="text" name="contact" required lay-verify="required|phone" autocomplete="off"                               class="layui-input">                    </div>                </div>            </div>        </div>        <div>            <div class="layui-col-xs8 layui-col-xs-offset2">                <div>                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">                        <div id="uploadQRcode">                        <button type="button" id="uploadQR">                            <i>&#xe67c;</i>上传客服二维码<span style="color: red;font-size: 20px;">*</span>                        </button>                        <div>                            <img id="qrshow" src="" alt=""                                 style="height: 100px;width:100px;border:1px solid black;">                        </div>                        <div id="startDiv">                            <button type="button" id="startUploadQR">开始上传</button>                        </div>                            <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div>                    </div>                    <input type="text" name="cli_qrcode" id="qrInput" style="display: none;" lay-verify="required">                    </blockquote>                </div>            </div>        </div>        <div>            <div class="layui-col-xs8 layui-col-xs-offset2">                <div>                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">                        <div id="uploadImg">                        <button type="button" id="upload">                            <i>&#xe67c;</i>上传商铺图片<span style="color: red;font-size: 20px;">*</span>                        </button>                        <div>                            <table style="text-align: center;">                                <thead>                                <tr>                                    <th style="text-align: center;">图片预览</th>                                    <th style="text-align: center;">大小</th>                                    <th style="text-align: center;">状态</th>                                    <th style="text-align: center;">操作</th>                                </tr>                                </thead>                                <tbody id="imgList"></tbody>                            </table>                        </div>                        <button type="button" id="startUpload">开始上传</button>                            <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1,                                推荐上传图片长675px,宽450px                            </div>                    </div>                    <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required">                    </blockquote>                </div>            </div>        </div>        <div>            <div class="layui-col-xs8 layui-col-xs-offset2" style="margin-top: 30px;">                <div>                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="addObject">确认保存</button>                </div>            </div>        </div>    </form></div><script src="{{static_url('layui/layui.js')}}" charset="utf-8"></script><script>    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 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 style="color: #5FB878;">上传成功</span>');                } else {                    this.error(index, upload);                }            }            , error: function (index, upload) {                //演示失败状态，并实现重传                var startDiv = $('#startDiv');                startDiv.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重试</a>');                startDiv.find('.demo-reload').on('click', function () {                    uploadSingle.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 <= 6) {                    //读取本地文件                    obj.preview(function (index, file, result) {                        var tr = $(['<tr id="upload-' + index + '">'                            , '<td><img src="' + result + '" alt="' + file.name + '" style="height: 66px;width:100px;"></td>'                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'                            , '<td>等待上传</td>'                            , '<td>'                            , '<button class="layui-btn demo-reload layui-hide">重传</button>'                            , '<button class="layui-btn layui-btn-danger demo-delete">删除</button>'                            , '</td>'                            , '</tr>'].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 style="color: #5FB878;">上传成功</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 style="color: #FF5722;">上传失败</span>');                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传            }        });        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></body></html>

编辑页面

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>编辑商铺</title>    <meta name="renderer" content="webkit">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">    <link rel="stylesheet" href="{{static_url('layui/css/layui.css')}}" media="all"></head><body><div style="margin-top: 30px;">    <form class="layui-form layui-form-pane" lay-filter="updateForm">        <input type="text" name="seller_id" lay-verify="required" style="display: none;">        <div>            <div class="layui-col-xs10 layui-col-xs-offset1">                <div>                    <label>商铺名称</label>                    <div>                        <input type="text" lay-verify="required" name="name" autocomplete="off">                    </div>                </div>            </div>        </div>        <div>            <div class="layui-col-xs10 layui-col-xs-offset1">                <div>                    <label>商铺编号</label>                    <div>                        <input type="text" name="code" autocomplete="off">                    </div>                </div>            </div>        </div>        <div>            <div class="layui-col-xs10 layui-col-xs-offset1">                <div>                    <label>详细地址</label>                    <div>                        <input type="text" name="address" required lay-verify="required" autocomplete="off"                               class="layui-input">                    </div>                </div>            </div>        </div>        <div>            <div class="layui-col-xs10 layui-col-xs-offset1">                <div>                    <label>联系方式</label>                    <div>                        <input type="text" name="contact" required lay-verify="required|phone" autocomplete="off"                               class="layui-input">                    </div>                </div>            </div>        </div>        <div>            <div class="layui-col-xs10 layui-col-xs-offset1">                <div>                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">                        <div id="uploadQRcode">                            <div>                                <img id="qrshow" src="" alt=""                                     style="height: 100px;width:100px;border:1px solid black;">                            </div>                            <div>                                <div>                                    <button type="button" class="layui-btn layui-btn-sm" id="uploadQR">                                        <i>&#xe67c;</i>修改客服二维码                                    </button>                                </div>                                <div id="startDiv">                                    <button type="button" class="layui-btn layui-hide layui-btn-sm" id="startUploadQR"                                            style="margin-left: 30px;">开始上传                                    </button>                                </div>                            </div>                            <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div>                        </div>                        <input type="text" name="old_cli_qrcode" style="display: none;">                        <input type="text" name="cli_qrcode" id="qrInput" lay-verify="required" style="display: none;">                    </blockquote>                </div>            </div>        </div>        <div>            <div class="layui-col-xs10 layui-col-xs-offset1">                <div>                    <div id="uploadImg">                        <div>                            <table style="text-align: center;">                                <thead>                                <tr>                                    <th style="text-align: center;">图片预览</th>                                    <th style="text-align: center;">状态</th>                                    <th style="text-align: center;">操作</th>                                </tr>                                </thead>                                <tbody id="imgList"></tbody>                            </table>                        </div>                        <div>                            <div>                                <button type="button" class="layui-btn layui-btn-sm" id="upload">                                    <i>&#xe67c;</i>添加商铺图片                                </button>                            </div>                            <div class="layui-col-xs3 layui-col-xs-offset5">                                <button type="button" class="layui-btn layui-btn-fluid layui-btn-sm" id="startUpload">                                    开始上传                                </button>                            </div>                        </div>                        <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1,                            推荐上传图片长675px,宽450px                        </div>                    </div>                    <input type="text" name="old_face_img" style="display: none;">                    <input type="text" name="face_img" id="imgInput" lay-verify="required" style="display: none;">                </div>            </div>        </div>        <div>            <div class="layui-col-xs10 layui-col-xs-offset1" style="margin-top: 30px;">                <div>                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="addObject">确认保存</button>                </div>            </div>        </div>    </form></div><script src="{{static_url('layui/layui.js')}}" charset="utf-8"></script><!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --><script>    layui.use(['form', 'element', 'jquery', '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)