layui 文件上传upload.render清空已选择文件并重新选择同名文件

最新推荐文章于 2025-07-17 10:15:18 发布

原创最新推荐文章于 2025-07-17 10:15:18 发布 · 7.1k 阅读

11 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

layui

1 篇文章

订阅专栏

本文介绍了解决上传Excel文件后因缓存导致无法重新上传同名文件的问题。通过前端操作清空缓存，并提供了一个具体的代码示例。

做需求时遇到个问题，上传的excel文件检验后不符合数据要求，需要清空已上传的缓存，不然无法重新上传同名文件。
思路：
1、先前端清空
2、清除layui的文件队列缓存

$('.layui-upload-file').attr('type', 'hidden');
$('.layui-upload-file').attr('type', 'file');
clearFile();

demo

var UPLOAD_FILES;
upload.render({
    elem: '#uploadFile', //绑定元素
    // url: '/property/importData', //上传接口
    url: '/...', //上传接口
    method: 'POST',
    auto: false,
    accept: 'file',
    bindAction: '#uploadBtn',
    size: 102400*30,//限制文件大小300M
    multiple: false,
    
    choose:function(obj){
        UPLOAD_FILES = obj.pushFile();
        obj.preview(function(index, file, result){
            if(file.name.length>0) {
                choose_file_flag=true;
                checkExcel(excel);
                //重置input文件上传框，清理fileList
                if(!choose_file_flag){
                    //清除文件缓存，不然无法上传同名文件
                    $('.layui-upload-file').attr('type', 'hidden');
                    $('.layui-upload-file').attr('type', 'file');
                    clearFile();
                }
            }
        });
    },
    before: function(obj) {

    },
    done: function(res, index, upload) {//上传完毕回调

    }
    ,error: function() {//请求异常回调

    }
});

//清空文件队列
function clearFile(){
    for (let x in UPLOAD_FILES) {
        delete UPLOAD_FILES[x];
    }
}