选择任何文件时，文件上传按钮上的 jQuery 侦听器答案

【问题标题】：jQuery listener on File upload button, when any file selected选择任何文件时，文件上传按钮上的 jQuery 侦听器
【发布时间】：2021-07-05 20:54:02
【问题描述】：

I'd like to attach a function to my File upload button, when any file selected.

现在，我使用以下代码：

jQuery("input:file").change(function () {
    console.log("function");
});

这没关系，当用户选择第一个文件或将其更改为另一个文件时。但是我想在用户选择一个文件时运行脚本，然后他们再次打开对话框，然后第二次选择同一个文件。

什么是正确的 jQuery 事件？

谢谢！

【问题讨论】：

【解决方案1】：

我会使用 .on 选择器...

$(document).on('change','#inputFile' , function(){ 
  console.log("function");
});

请检查您在 .on 选择器中的输入，并在成功运行该功能后，甚至在失败后清理输入

$('#inputFile').val("");

【讨论】：

我认为.on('change', ...) 是.change() 的快捷方式。或者你会将它附加到document，而不是input？如果我清理input 的val，它会上传文件，还是我应该为它创建一个包装器输入？
.on('change', ...) 与.change() 不同.. 它是一个快捷方式.. ideed 但在这种情况下它的工作方式不同使用此代码我在绑定的document 上创建一个侦听器到input ...我的意思是你应该在上传文件后清理input的val...当然要检查文件是否正确上传或某些信息丢失
是的，但我不想异步上传文件。我想用表单上传它们，作为一个普通的、简单的 Http 站点。它是一个图片上传器，用户可以在其中选择一张图片，然后在一个 jQuery 对话框中他们将选择一个区域。我会将图像裁剪到服务器端的选定区域。当用户选择图像时，它运行良好。当他们在第一个图像之后选择另一个图像时，它也有效，因为他们改变了主意。但是如果他们想选择其他区域，他们会在操作系统的文件选择器对话框中选择相同的文件，我想向他们展示我的裁剪对话框。

【解决方案2】：

极简主义

$("#myID").change(() =&gt; alert('It works!'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="myID">

还有

$("#myID").change(function(e){
  alert('It works!')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="myID">

【讨论】：