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

144

假设我们有以下代码：

<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 html javascript-events

— 月亮
source

5

多么时髦的旧Windows UI！

— El-Burritos，

@ El-Burritos，这是在2010年发布的；当然，这是旧的Windows UI：D

— Simon Cheng

181

收听更改事件。

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

— 阿努拉格
source

3

我们要把它写在那里..在javascript脚本标记

— 月亮

5

在脚本标记中为“是”，或者您可以将其添加为属性（<input type="file" onchange="..." />），尽管不建议这样做。

— 阿努拉格

7

请注意，在IE7和8中，“更改”事件不会冒泡到表单事件。您需要将您的侦听器放在<input>标记上。

— xer0x 2011年

36

如果用户需要“重新加载”文件怎么办？onchange不会触发，但是仍然应该像第一次加载一样重新加载。

— bryc 2015年

11

请注意，如果用户连续多次选择同一文件，则该操作无效，因为该文件没有更改。

— bob0the0mighty

45

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

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

— 克莱姆
source

5

效果很好，但请注意IE <11怪异的行为。它不允许您更改输入的值，因此很可能需要解决方法。stackoverflow.com/questions/9011644/...

— 阿列克Tkalenko

15

jQuery方式：

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

    // your code
});

— 扎农
source

3

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

— 安东尼
source

2

如果您提供一些代码来解释您的答案，这将有所帮助，因为在“问题”代码段中未提及更改事件

— DevDig

我认为@anthony指的是以下情况：选择一个文件。现在再次打开文件选择器，但是这次单击“取消”。由于第二次未选择文件，因此文件输入控件将重置，从而更改其初始选择，并触发change事件。

— dvlsc

我在Chrome 83上尝试了此操作，但单击“取消”按钮时未触发该事件。这个答案已经很老了，我想至少在Chrome上必须已经解决了。

— Saeed Ahadian

3

这就是我使用纯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;
  }
  submit.disabled = false;
});

#warning {
    text-align: center;
}

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

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

展开摘要

— 雷加男孩
source