HTML <input type='file'> 文件选择事件答案

【问题标题】：HTML <input type='file'> File Selection EventHTML <input type='file'> 文件选择事件
【发布时间】：2011-04-01 11:57:19
【问题描述】：

假设我们有这段代码：

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

结果如下：

当用户点击“浏览...”按钮时，会打开一个文件搜索对话框：

用户将通过双击文件或单击“打开”按钮来选择文件。

在选择文件后，我可以使用 Javascript 事件来收到通知吗？

【问题讨论】：

多么时髦的旧 Windows UI！
@El-Burritos 这是 2010 年发布的；当然，这是一个旧的 Windows UI：D

标签： javascript html dom-events

【解决方案1】：

收听更改事件。

input.onchange = function(e) { 
  ..
};

【讨论】：

是在脚本标签中，或者您可以将其添加为属性 (<input type="file" onchange="..." />)，尽管不建议这样做。
请注意，在 IE7 和 8 中，“更改”事件不会冒泡到表单事件。你需要把你的监听器放在标签上。
如果用户需要“重新加载”文件怎么办？ onchange 不会触发，但仍应像第一次加载一样重新加载。
注意，如果用户连续多次选择同一个文件，这将不起作用，因为文件没有改变。
在处理完onchange事件后请务必清空该值，否则如果用户在初始选择后决定选择不同的文件，下次将不会触发onchange

【解决方案2】：

当你必须重新加载文件时，你可以删除输入的值。下次添加文件时，会触发“on change”事件。

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

【讨论】：

这很好，但要注意奇怪的 IE stackoverflow.com/questions/9011644/…

【解决方案3】：

jQuery方式：

$('input[name=myInputName]').change(function(ev) {

    // your code
});

【讨论】：

【解决方案4】：

这就是我用纯 JS 做的方式：

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  warning.classList -= "warn";
  submit.disabled = false;
});

#warning {
    text-align: center;
    transition: 1s all;
}

#warning.warn {
    color: red;
    transform: scale(1.5);
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
        <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>

【讨论】：

【解决方案5】：

即使您单击取消，也会调用 Change 事件。

【讨论】：

如果您提供一些代码来解释您的答案会有所帮助，因为问题代码 sn-p 中没有提到更改事件
我认为@anthony 指的是以下场景：选择一个文件。现在再次打开文件选择器，但这次单击取消。由于第二次没有选择文件，文件输入控件重置，从而改变了它的初始选择，并触发了 change 事件。
我在 Chrome 83 上试过了，当我点击取消按钮时，事件没有被触发。这个答案很老了，我想它一定已经修复了，至少在 Chrome 上。

【解决方案6】：

虽然这是一个老问题，但它仍然是一个有效的问题。

预期行为：

上传后显示选定的文件名。
如果用户点击Cancel，请不要做任何事情。
即使用户选择了同一个文件，也显示文件名。

带有演示的代码：

<!DOCTYPE html>
<html>

<head>
  <title>File upload event</title>
</head>

<body>
  <form action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="userFile" id="userFile"><br>
    <input type="submit" name="upload_btn" value="upload">
  </form>
  <script type="text/javascript">
    document.getElementById("userFile").onchange = function(e) {
      alert(this.value);
      this.value = null;
    }
  </script>
</body>

</html>

说明：

onchange 事件处理程序用于处理文件选择事件中的任何更改。
onchange 事件仅在元素的值发生更改时触发。因此，当我们使用input 字段选择同一个文件时，不会触发该事件。为了克服这个问题，我在onchange 事件函数的末尾设置了this.value = null;。它将所选文件的文件路径设置为null。因此，即使在同一文件选择时也会触发onchange 事件。

【讨论】：