django JavaScript：访问文件输入的“更改”事件时出错

已解决

@CodeThing的评论提醒我们的问题是，页面上有另一个版本的表单。这并不明显：对于遇到这个问题的Django开发人员，请检查模板中的任何{% include %}标记，因为表单的其他版本（包含相同名称的元素）位于同一页面中的模态中。无论是JS还是Django都不会抛出这个错误，而且在查看模板时并不明显，这就是为什么很难找到：您必须使用Inspect并搜索它。

主要原则：如果遇到此问题，请使用Inspect检查具有相同“id”的任何其他元素，如果存在，则将其删除。这样代码就可以完美地工作了。
瞄准

我有两个输入：（1）“文件输入”，和（2）“文本输入”
我想监听“文件输入”中的“更改”（即成功选择文件），并且在这样的改变时将“text-input”值设置为文件的名称。
问题

1.使用addEventListener时未触发“change”事件
1.当我使用input的'onchange'属性时，它会触发，但我仍然无法访问文件

**Context：**这是一个Django项目，前端使用Bootstrap 5（无jQuery）。我尽可能地使用Django Crispy Forms，尽管我已经从这个文件中删除了它们（看看这是否是导致问题的原因-唉，不是）。
尝试的解决方案

我知道这应该很容易。我看过很多类似的帖子，我设置了一个 'dummy' HTML脚本，以确保我不会发疯。这是张贴在下面和它的工作完美。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

<input type="file" name="file" id="file-input" accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm">
<input type="text" name="text" id="text-input">

<script>
const fileInput = document.getElementById("file-input");
const textInput = document.getElementById("text-input");

console.log(fileInput);
console.log(textInput);

fileInput.addEventListener('change', () => {
    console.log('change registered');
    if (fileInput.files.length > 0) {
        console.log(fileInput.files);
        console.log(fileInput.files[0].name);
        textInput.value = fileInput.files[0].name;
    }
});
</script>
    
</body>
</html>

输出与此虚拟文件的预期一致-即它工作：

输入ID=“file-input”type=“file”name=“file”accept=".mp3，.mp4，. mpeg，. mpga，.m4a，. wav，. webm”
输入id=“text-input”type=“text”name=“text”
变更登记
文件列表[文件]
interview.mp4*
问题代码

现在我的Django项目的模板被设置为尽可能地复制这个虚拟设置（参见下面的相关部分）：

<form id="file-form" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="my-4 px-1">
        <input type="file" name="file" id="file-input" accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm">
    </div>
    <div class="my-3 px-1">
        <input type="text" name="text" id="text-input">
    </div>
    <button type="submit" class="btn btn-add">
        Transcribe
    </button>
    <script>
        const fileInput = document.getElementById("file-input");
        const textInput = document.getElementById("text-input");

        console.log(fileInput);
        console.log(textInput);

        fileInput.addEventListener('change', () => {
            console.log('change registered');
            if (fileInput.files.length > 0) {
                console.log(fileInput.files);
                console.log(fileInput.files[0].name);
                textInput.value = fileInput.files[0].name;
            }
        });
    </script>
</form>

但输出不正确-没有触发更改事件！

即，我只得到下面的：

输入id=“file-input”class=“form-control form-control-file”type=“file”name=“file”required="”
输入id=“text-input”type=“text”name=“text”
*没有其他

我尝试通过在输入本身上使用'onchange'属性来解决这个问题。这确实注册了一个更改事件，但是fileInput.files仍然是一个空列表，所以这不起作用。
我已经检查了这些SO答案，但它们没有帮助-它们的工作方式就像在虚拟文件中一样：SO Answer 1 SO Answer 2
”””我错过了什么吗？为什么这在dummy plain HTML版本中有效，而在Django版本中无效？**脚本肯定正在运行（它正确地控制台。记录两个输入）;它不能是脆的形式，我已经从模板中删除;它不能是或csrf_input，当它们被删除时，它仍然不起作用。我对此感到非常困惑！
任何和所有的帮助非常感谢！

django JavaScript：访问文件输入的“更改”事件时出错

1条答案

相关问题

热门标签

最新问答