美文网首页
【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】上传文件时进行校验是否选择文件

    layui 版本为 2.6.8。 主要关键在 choose回调那。懒得看源码了,就用uploadFiles = o...

  • 前端——利用File signature精准校验文件类型

    背景:在进行文件上传时,往往需要对上传文件的类型进行限制。最简单也是最常用的文件类型校验方法,是直接校验文件的拓展...

  • 2022-11-18教你如何使用windows和linux产生文

    当你的数据在windows下时,并且上传到linux服务器下时。想检查文件是否上传完整。按照以下步骤进行校验即可一...

  • 2018 10 25

    实现layui的上传文件接口

  • php 上传文件打印error

    一般使用$_FILES来进行文件上传时,可以使用$_FILES["file"]["error"]来判断文件上传是否...

  • web安全

    【原创】本文主要简述前端web安全知识 文件上传 后端服务器未对文件进行校验和过滤,上传asp/aspx/jsp/...

  • 文件上传之绕过

    文件上传校验方式 客户端JavaScript校验服务端校验①请求头中content-type字段校验②文件内容头校...

  • django-文件上传

    文件上传的思路: 文件上传:是否有文件进行判断 如果有:给文件一个上传路径,并利用uuid生成一个新的名字,与上传...

  • django---文件上传

    文件上传的思路: 文件上传:是否有文件进行判断 如果有:给文件一个上传路径,并利用uuid生成一个新的名字,与上传...

  • WebApi上传文件方式

    //验证是否选择上传文件 if (!Request.Content.IsMimeMultipartContent(...

网友评论

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

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