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

我正在使用python的Eel软件包，可帮助我将html / css / js与python集成
所以我根据python文件中的输入通过JS动态生成HTML标签
基本上，这是一个聊天机器人，该聊天机器人的用户界面是由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，但选择上一个文件image.png而不是样本.pdf

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

参考方案

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

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')中当前选定的文件标记为已调用。

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

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

如果我得到url('')，我该如何使用另一个URL - javascript

我是新手，正在写这篇文章，但是如果源上没有图像，那么我只有空白。有人可以告诉我，如果我正在获取背景图像，如何获取/images/no-image.jpg：url（）;这是我的代码：<div class="uk-clearfix uk-position-relative"> <div class="recipeb…

对ID为'abc％'的dom执行操作 - javascript

我想对ID为'abc％'的DOM进行一些操作<a id='abc1'></a> <a id='abc2'></a> <a id='abc3'></a> <a id='abc4'></a>…

Jsonp没有出现``访问控制允许来源''错误 - javascript

在我的PHP中，我喜欢这样来回显jsonp类型的“ json数据”echo $_GET['callback'] . '('.json_encode($arr).')'; 在我的js（angularjs）中，$http.get('http://example.com/app/?callbac…

如何单击没有固定类别值的按钮？但是它有一个固定的'data-testid' - javascript

如何单击没有固定类别值的按钮？但是它有一个固定的“数据-testid”。使用JS或Python如何实现？document.getElementById("myCheck").click(); 参考方案 您可以尝试使用querySelector()来使用任何有效的CSS选择器（即属性选择器）。演示：function muFunction()…

Javascript IF语句 - javascript

                        嗨，我有这段代码可以正常工作，并将两个日历显示为一个日历。我还有一个php变量$login_session，其中包含登录电子邮件地址的用户。关于如何显示[email protected]日历的任何想法（伪代码）IF $login_session == "[email protected]&#…