首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML输入文件选择事件在选择同一文件时不会触发

HTML输入文件选择事件在选择同一文件时不会触发
EN

Stack Overflow用户
提问于 2012-08-20 07:06:26
回答 8查看 173.7K关注 0票数 256

有没有可能检测到用户为file input类型的HTML选择的每个文件?

这个问题以前被问过很多次,但是如果用户再次选择相同的文件,通常建议的onchange事件不会触发。

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2012-08-24 12:04:39

在每个onclick事件中将input的值设置为null。这将重置input的值并触发onchange事件,即使选择了相同的路径。

代码语言:javascript
复制
var input = document.getElementsByTagName('input')[0];

input.onclick = function () {
  this.value = null;
};
  
input.onchange = function () {
  console.log(this.value);
};
代码语言:javascript
复制
<input type="file" value="C:\fakepath">

注意:如果您的文件以“C:\fakepath”为前缀,这是正常的。这是一个安全特性,可以防止JavaScript知道文件的绝对路径。浏览器仍然可以在内部识别它。

票数 342
EN

Stack Overflow用户

发布于 2019-02-11 22:45:33

每次用户单击字段时,使用onClick事件清除目标输入的值。这确保了同一文件也会触发onChange事件。对我很有效:)

代码语言:javascript
复制
onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

使用TypeScript

代码语言:javascript
复制
onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}
票数 30
EN

Stack Overflow用户

发布于 2014-09-20 20:52:48

代码语言:javascript
复制
<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); this.value=null; return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

this.value=null;只在Chrome上是必需的,火狐在return false;上就可以很好地工作

这是一个FIDDLE

票数 27
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12030686

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档