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

agyaoht7 于 2023-02-02 发布在 Java

关注(0)|答案(6)|浏览(337)

假设我们有这样的代码：

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

其结果是：

当用户单击"浏览..."按钮时，将打开文件搜索对话框：

用户将通过双击文件或单击"打开"按钮来选择文件。
是否有一个Javascript事件，我可以使用它在选择文件后收到通知？

JavaScript

来源：https://stackoverflow.com/questions/3528359/html-input-type-file-file-selection-event

6条答案

按热度按时间

js5cn81o1#

侦听更改事件。

document.getElementById('input').addEventListener('change', function(e) {
  if (e.target.files[0]) {
    document.body.append('You selected ' + e.target.files[0].name);
  }
});

<input type="file" id="input">

赞(0）回复(0）举报 2023-02-02

gmol16392#

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

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

赞(0）回复(0）举报 2023-02-02

bq8i3lrv3#

jQuery方式：

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

    // your code
});

赞(0）回复(0）举报 2023-02-02

fzsnzjdm4#

这就是我对纯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>

赞(0）回复(0）举报 2023-02-02

yjghlzjz5#

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

赞(0）回复(0）举报 2023-02-02

t98cgbkg6#

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

- 预期行为：**
上载后显示所选文件名。
如果用户单击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事件。

赞(0）回复(0）举报 2023-02-02

我来回答

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

6条答案

相关问题

热门标签

最新问答