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

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


当前回答

清除输入的第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 = "";
  }
handleChange({target}) {
    const files = target.files
    target.value = ''
}

使用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 = ''
}

选择的答案(使用状态设置输入值null)给了我一个错误。

我使用空字符串代替

    const [fileValue, setFileValue] = React.useState("")

    <input
        onClick={() => {
           setFileValue("");
        }}
        type="file"
        value={fileValue}
        onChange={handleAddFile}
    />


清除输入的第0个索引的值对我来说很有用。请尝试下面的代码,希望这将工作(AngularJs)。

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