• laui中文件上传使用


    参考:https://www.cnblogs.com/zhaopanpan/p/9927548.html

    单文件上传

    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;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>

    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="50px;height:30px;text-align:center;line-height:30px;">重试</a>');
                    startDiv.find('.demo-reload').on('click', function () {
                        uploadSingle.upload();
                    });
                }
            });
        });

    多文件上传

    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>

    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;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'); //显示重传
                }
            });
        });
  • 相关阅读:
    Hive_元数据配置到MySQL
    第一篇
    mysql查询结果添加序列号
    java中正则表达式
    java位运算
    正数负数原码,反码,补码
    各进制间相互转换
    linux下默认安装jdk路径查找
    localhost:8080/manager/status无法访问403 Access Denied
    Idea官网指南
  • 原文地址:https://www.cnblogs.com/symcheal/p/15663816.html
Copyright © 2020-2023  润新知