第二次调用 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 方法，它采用以前的文件而不是我想要的新文件 select

看图

只看文件名：image.png

忽略所有其他红色错误

正如你在图像中看到的那样，当我第一次调用 "image to text" 时它工作正常创建 DOM 并继续进行但是当我第二次调用 "image to text" 时它创建 DOM 但 select 上一个文件 image.png 而不是 Sample.pdf

可以看到控制台文件名第二次调用时应该 select 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。 If/else算法

如果您更好地构建代码，它可能会出人意料地更好地工作。尝试使用 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')当前选择的文件标记为已调用.

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

您可以通过在 files.forEach() 函数末尾执行 file.className = 'selectButtonDone'; 来做到这一点。

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

File OnChange method when called second time it takes the previous file which is selected first Time

javascript

python

eel

1。索引选择

2。 If/else算法