찾다

집 >웹 프론트엔드 >레이이 튜토리얼 >Layui 파일 업로드, 미리보기 및 수정 방법

Layui 파일 업로드, 미리보기 및 수정 방법

尚
尚앞으로
2019-12-28 17:13:4515160검색

Layui 파일 업로드, 미리보기 및 수정 방법 단일 파일 업로드 h1, 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>
E

2, JS 파트

Rreeee

다중 사진 업로드

1, HTML

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();
                });
            }
        });
    });
E

2, JS 파트

R
<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>
E

페이지 추가 

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 = $([&#39;<tr id="upload-&#39; + index + &#39;">'
                            , '<td><img src="&#39; + result + &#39;" alt="&#39; + file.name + &#39;" 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'); //显示重传
            }
        });
    });

페이지 편집

R
<!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(&#39;layui/css/layui.css&#39;)}}" 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(&#39;layui/layui.js&#39;)}}" 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 = $([&#39;<tr id="upload-&#39; + index + &#39;">'
                            , '<td><img src="&#39; + result + &#39;" alt="&#39; + file.name + &#39;" 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>
EE

레이유에 대해 더 알아보기 지식이 있으신 분들은

layui 사용법 튜토리얼

칼럼을 주목해주세요.

위 내용은 Layui 파일 업로드, 미리보기 및 수정 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

layui JS
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：Layui에서 테이블 데이터 테이블의 열을 숨기는 방법 소개다음 기사：Layui에서 테이블 데이터 테이블의 열을 숨기는 방법 소개

관련 기사

더보기