HTML <输入类型='文件'>文件选择事件

javascript html dom-events

2022-08-30 01:57:36

假设我们有这个代码：

<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 事件，我可以在选择文件后收到通知？

答案 1

侦听更改事件。

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

答案 2

当您必须重新加载文件时，可以擦除输入的值。下次添加文件时，将触发“更改时”事件。

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