美文网首页
【layui】上传文件时进行校验是否选择文件

【layui】上传文件时进行校验是否选择文件

作者: 睡神疯子 | 来源:发表于2021-06-06 14:08 被阅读0次

    layui 版本为 2.6.8。

    主要关键在 choose回调那。懒得看源码了,就用uploadFiles = obj.pushFile();获取上传的文件吧。

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><span style="color:red">* </span>上传模板</label>
            <div class="layui-input-inline">
                <button class="layui-btn" id="podaFile" name="podaFile" type="button">选择文件</button>
            </div>
        </div>
    </div>
    <div class="layui-layer-btn">
        <button class="layui-btn" id="uploadFileBtn2" type="button">开始上传</button>
        <input class="layui-btn" id="uploadFileBtn" type="hidden">
    </div>
    
    let uploadFiles = {};
    upload.render({
        elem: '#podaFile',
        url: '你的 url',
        auto: false,
        field: "odaFile",
        accept: "file",
        exts: "xlsx",
        //multiple: true,
        bindAction: '#uploadFileBtn',
        // data: {},
        choose: function(obj){
            uploadFiles = obj.pushFile();
            // 清空,防止多次上传
            for (let k in uploadFiles) {
                delete uploadFiles[k];
            }
            obj.preview(function(index, file, result){
                obj.pushFile();// 再添加
                let fileBox = $('#podaFile').parent();
                fileBox.find('.layui-upload-choose').remove();
                fileBox.append(`<span class="layui-inline layui-upload-choose">${file.name}</span>`);
            });
        },
        before: function (obj) { 
            layer.load();
        },
        done: function (res) {
            layer.closeAll('loading');
            if (res.code == 601) {
                layer.alert('验证失败,点击确定查看原因', {icon: 2});
            } else if (res.code == 200) {
                // 清除文件
                let fileBox = $('#podaFile').parent();
                fileBox.find('.layui-upload-choose').remove();
                $('#podaFile').val('');
            }else {
                layer.alert(res.msg, {icon: 2});
            }
        },
        error: function (index, upload) {
            layer.closeAll('loading');
        }
    });
    $('#uploadFileBtn2').on('click', e => {
        if (Object.keys(uploadFiles).length > 0) {
            $('#uploadFileBtn').click();
        } else {
            layer.alert('请选择文件再上传!', {icon: 2})
        }
    });
    

    相关文章

      网友评论

          本文标题:【layui】上传文件时进行校验是否选择文件

          本文链接:https://www.haomeiwen.com/subject/lxrwsltx.html