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

2021-06-06  本文已影响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})
    }
});
上一篇 下一篇

猜你喜欢

热点阅读