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

HTML input file selection event not firing upon selecting the same file

本文关键字：文件 选择 HTML 输入 事件      更新时间：2023-09-26

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

以前曾多次询问此问题，但如果用户再次选择相同的文件，通常建议的onchange事件不会触发。

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

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知道文件的绝对路径。浏览器内部仍然知道这一点。

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

onInputClick = (event) => {
    event.target.value = ''
}
<input type="file" onChange={onFileChanged} onClick={onInputClick} />

使用TypeScript

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

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

这是一个FIDDLE

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

在本文中，标题为"使用表单输入进行选择"的

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>

它为"change"添加了一个事件侦听器，但我测试了它，即使您选择了相同的文件，它也会触发，而不是取消。

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

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

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

如果您使用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 = "";
  }

选择的答案（使用state将输入值设置为null）给了我一个错误。

我使用空字符串代替

    const [fileValue, setFileValue] = React.useState("")
    <input
        onClick={() => {
           setFileValue("");
        }}
        type="file"
        value={fileValue}
        onChange={handleAddFile}
    />

在文件加载成功后，执行您想做的任何操作。在文件处理完成后，将文件控件的值设置为空白字符串。因此，即使文件名更改与否，也将始终调用.change（）。例如，你可以做这件事，并像魅力一样为我工作

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

我不能在我正在进行的项目中使用javascript。

简单使用：

<input type="file" onclick="this.value = null;" ..>
相关文章：