Question

假设我们有这段代码：

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

结果如下：

image showing browse and upload button

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

image showing a file search dialog box with a file selected

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

在选择文件后，是否有可用于通知的Javascript事件？

Answer 1

收听改变事件。

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

Answer 2

当您必须重新加载文件时，您可以删除输入值。下次添加文件时，＆＃39;进行更改＆＃39;事件将触发。

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

Answer 3

jQuery方式：

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

    // your code
});

Answer 4

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

＆＃13;

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;
  }
  submit.disabled = false;
});

＆＃13;

#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}

＆＃13;

<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>

＆＃13;

Answer 5

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

Answer 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 字段选择同一个文件时，不会触发该事件。为了克服这个问题，我在 this.value = null; 事件函数的末尾设置了 onchange。它将所选文件的文件路径设置为 null。因此，即使在选择同一文件时也会触发 onchange 事件。

HTML <input type =“file”/>文件选择事件

6 个答案: