javascript - 选择同一文件时未触发 HTML 输入文件选择事件

Question

是否有机会检测用户为 HTMLinput类型file元素所做的每个文件选择？

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

Answer 1

在每个事件上设置inputto的值。即使选择了相同的路径，这也会重置' 的值并触发事件。nullonclickinputonchange

var input = document.getElementsByTagName('input')[0];

input.onclick = function () {
  this.value = null;
};
  
input.onchange = function () {
  console.log(this.value);
};

<input type="file" value="C:\fakepath">

注意：如果您的文件带有'C:\fakepath'前缀，这是正常的。这是一项安全功能，可防止 JavaScript 知道文件的绝对路径。浏览器仍然在内部知道它。

Answer 2

每次用户单击字段时，使用 onClick 事件清除目标输入的值。这确保了 onChange 事件也会为同一个文件触发。为我工作:)

onInputClick = (event) => {
    event.target.value = ''
}

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

使用打字稿

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Answer 3

<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 是必需的，Firefox 可以正常工作return false;

这是一个小提琴

Answer 4

在本文中，在标题“使用表单输入进行选择”下

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

它为“更改”添加了一个事件侦听器，但我对其进行了测试，即使您选择相同的文件而不是取消，它也会触发。

Answer 5

handleChange({target}) {
    const files = target.files
    target.value = ''
}

Answer 6

清除输入的第 0 个索引的值对我有用。请尝试下面的代码，希望这会起作用（AngularJs）。

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };

Answer 7

<input #myInput type="file" id="imgFile" (click)="$event.target.value=null"
       (change)="detectUploadedImage($event)" accept="image/*" />

Answer 8

在文件加载成功后做任何你想做的事情。在文件处理完成后将文件控制的值设置为空白字符串。所以即使文件名发生变化，也会始终调用 .change()。例如，您可以做这件事并像魅力一样为我工作

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

Answer 9

如果您使用 Angular，则使用两种方式绑定对我有用。

这是我的 HMTL

<input type="file" #upload name="upload" [(ngModel)]="inputValue"(change)='fileEvent($event)'/>

和TS..

  @ViewChild('upload') uploadBtn: HTMLElement;

  fileEvent(e: any){
    
   //file upload part... 

    this.inputValue = "";
  }