Javascript 文件上载单击事件

这是我的问题。我已经创建了文件上载功能。但是当我单击“上载”按钮时，显示我选择文件的模式。这是可以的，但在获取文件并单击“打开”后，再次显示此模式，并在第二次选择功能结束后显示我

$（文档）.ready（函数（）{
document.getElementById（'file_alt'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
调试器；
让file=document.getElementById（'file'）；
var fileName=$（“#fileName”）；
文件。单击（）；
$（文件）.on（'change'，函数（e）{
让fileText=e.target.files[0].name；
fileName.val（fileText）；
});
});
});

Прикачи
也许我没有完全理解您对问题的描述，但我看不到在您的演示代码中出现这样的问题

但是，我建议做一些事情来更全面地改进代码：

1） 在语法上保持一致——要么使用vanilla JS语法，要么使用jQuery语法。将它们混合在一起会使代码更难阅读。在我的示例中，我一直使用jQuery

2） 将“更改”事件移到“单击”事件处理程序之外。当它位于单击处理程序中时，这意味着每次单击按钮时，它都会向文件输入添加另一个“更改”事件处理程序。添加新的处理程序不会删除旧的处理程序。这意味着您下次选择之后的文件时，它将运行之前添加的所有更改处理程序函数。如果你仔细观察你的代码，你会很快看到它依次显示所有先前选择的文件的名称，然后再替换为后面的文件。这是所有这些函数一个接一个运行的结果。您不需要函数多次运行，因此如果您在“click”处理程序之外声明它，则在页面加载时它将创建一次事件处理程序


$（文档）.ready（函数（）{
var file=$（'#file'）；
$（'#file_alt'）。单击（函数（e）{
e、 预防默认值（）；
文件。单击（）；
});
$（文件）.on（'change'，函数（e）{
让fileText=e.target.files[0].name；
$（'#fileName'）.val（fileText）；
});
});

Прикачи
我不太理解你的问题。你能试着澄清一下吗？也许在a中1）单击按钮2）选择文件3）再次单击。。。列表？为什么混合使用vanilla JS和jQuery？这很混乱…使用fileinput的更改事件，而不是单击event@SumitBadaya代码已经做到了这一点。仔细看看哪个元素有点击事件，哪个元素有变更事件……我的意思是变更事件应该是好的，而不是需要点击事件。更恰当地理解。