javascript - 第二次调用 File OnChange 方法时，它会采用第一次选择的前一个文件

Question

我正在使用Python的Eel包，它可以帮助我将Html/CSS/js与Python集成所以我根据Python文件中的输入通过JS动态生成Html标签基本上它是一个聊天机器人，该聊天机器人的 UI 是由 Html/js 创建的

动态创建标签的main.js

eel.expose(selectPDF);
function selectPDF(moduleSelection){ // moduleSelection is coming from python
    console.log("select pdf called")
    var DemoDom = document.createElement("input");
    DemoDom.setAttribute('type','file'); //creating tag for input file
    DemoDom.setAttribute('name','myfile');
    DemoDom.id = "agenttext";
    DemoDom.setAttribute('class','selectButton');
    DemoDom.setAttribute('multiple','multiple');
    DemoDom.setAttribute('onchange','showname("'+moduleSelection+'")')
    chatBox.appendChild(DemoDom);

}
eel.expose(showname); //this is eel package syntax
function showname(moduleSelection){
    console.log("i am here")
    var name = document.getElementsByClassName('selectButton');
    var fileList = [];
    // if only one file is selected do this
    if(name[0].files.length === 1){
        console.log("File name: ", name[0].files[0].name)
        var temp = name[0].files[0].name;
        eel.getFileName(temp,moduleSelection); // passing file to python function getFileName
    }
    else{
        for (var i = 0; i < name[0].files.length; i++) {
            console.log("File name for loop: ", name[0].files[i].name)
           fileList.push(name[0].files[i].name); // push all file to list 
        }
        eel.getFileName(fileList,moduleSelection); // passing filelist to python function getFileName
    }
    return
}

现在，当我第一次调用 selectPDF() 时，它会创建输入标记并调用 onchange 方法，一切正常

但是现在，当我第二次调用它时，js 再次创建输入标记并调用 onchange 方法，它采用前一个文件，而不是我想要选择的新文件

看图

只需查看文件名:image.png

忽略所有其他红色错误

正如您在图像中看到的那样，当我第一次调用“图像到文本”时，它工作正常，创建 DOM 并进一步继续，但是当我第二次调用“图像到文本”时，它会创建 DOM 但选择上一个文件图像。 png 而不是 Sample.pdf

可以看到控制台文件名第二次调用时应选择 Sample.pdf 而不是 image.png

Answer 1

似乎您的应用每次都会执行此代码

if(name[0].files.length === 1){
        console.log("File name: ", name[0].files[0].name)
        var temp = name[0].files[0].name;
        eel.getFileName(temp,moduleSelection); // passing file to python function getFileName
    }

1。索引选择

您每次都从 name[0] 中选择第一个索引是否有原因？也许只检查 name.files.length 就可以了？

2。如果/否则算法

如果你的代码结构更好一点，它可能会出人意料地工作得更好。尝试使用 Javascript Array.forEach()方法而不是你的循环。它看起来像这样

function showname(moduleSelection) {
    console.log("i am here");
    var files = document.getElementsByClassName('selectButton');
    
    var fileList = [];
    if (files.length > 0) {
        files.forEach(file => {
            console.log("File name: ", file.files[0].name);
            fileList.push(file.files[0].name);
        })
        eel.getFileName(fileList, moduleSelection);
    }
    return;
}

我希望这也许希望有所帮助!

编辑:

如果您想在调用文件之后删除以前的文件，则必须将 document.getElementsByClassName('selectButton') 中当前选定的文件标记为>已经打电话。

您可以通过多种方式执行此操作，例如在文件名更改后将类名从selectButton更改为selectButtonDone插入 fileList[] 数组。

您可以通过在 files.forEach() 函数末尾执行 file.className = 'selectButtonDone'; 来完成此操作。