지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 레이이 튜토리얼 > 본문

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

尚
풀어 주다： 2019-12-28 17:13:45
앞으로
15095명이 탐색했습니다.

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
원천：cnblogs.com
이전 기사：Layui에서 테이블 데이터 테이블의 열을 숨기는 방법 소개 다음 기사：Layui 테이블 동적 디스플레이 변환
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1997
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2159
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1824
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1719
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1737
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿