如何检测同一文件的输入类型=文件"更改"？

Question

我想在用户选择文件时触发事件..change如果用户每次都更改文件,则对事件执行此操作.

但是如果用户再次选择相同的文件,我想激活该事件.

1. 用户选择文件A.jpg(事件触发)
2. 用户选择文件B.jpg(事件触发)
3. 用户选择文件B.jpg(事件不会触发,我希望它触发)

我该怎么做？

Answer 1

如果你尝试过.attr("value", "")但没有工作,不要惊慌(就像我做的那样)

只是做.val(""),而且会很好

Answer 2

你可以欺骗它.删除文件元素并将其添加到change事件的相同位置.它将擦除文件路径,使其每次都可以更改.

关于jsFiddle的示例.

或者你可以简单地使用.prop("value", ""),在jsFiddle上看这个例子.

• jQuery 1.6+ prop
• 早期版本 attr

Answer 3

每次用户单击控件时,您都可以将文件路径设置为null.现在,即使用户选择了相同的文件,也会触发onchange事件.

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />

Answer 4

我通过清除文件输入值onClick然后发布文件onChange来实现此功能.这允许用户连续两次选择相同的文件,并且仍然将更改事件触发以发布到服务器.我的例子使用了jQuery表单插件.

$('input[type=file]').click(function(){
    $(this).attr("value", "");
})  
$('input[type=file]').change(function(){
    $('#my-form').ajaxSubmit(options);      
})

Answer 5

每次用户单击字段时，使用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 = ''
}

Answer 6

这是我发现对我有用的 React-y 方式解决方案：

onClick={event => event.target.value = null}

Answer 7

您可以做的最简单的事情可能是将值设置为空字符串。这会强制它每次“更改”文件，即使再次选择相同的文件也是如此。

<input type="file" value="" />

Answer 8

这对我有用

<input type="file" onchange="function();this.value=null;return false;">

Answer 9

受到@braitsch 的启发，我在 AngularJS2 中使用了以下内容 input-file-component

<input id="file" onclick="onClick($event) onchange="onChange($event)" type="file" accept="*/*" />

export class InputFile {

    @Input()
    file:File|Blob;

    @Output()
    fileChange = new EventEmitter();

    onClick(event) {
        event.target.value=''
    }
    onChange(e){
        let files  = e.target.files;
        if(files.length){
            this.file = files[0];
        }
        else { this.file = null}
        this.fileChange.emit(this.file);
    }
}

在这里onClick(event)救了我:-)

Answer 10

VueJs解决方案

<input
                type="file"
                style="display: none;"
                ref="fileInput"
                accept="*"
                @change="onFilePicked"
                @click="$refs.fileInput.value=null"
>

Answer 11

为输入创建单击事件和更改事件。单击事件清空输入，更改事件包含您要执行的代码。

因此，当您单击输入按钮时（在选择文件窗口打开之前），单击事件将为空，因此当您选择文件时，更改事件将始终触发。

$("#input").click(function() {
  $("#input").val("")
});

$("#input").change(function() {
  //Your code you want to execute!
});

<input id="input" type="file">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>