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

How to detect input type=file "change" for the same file?

提问by Gadonski

I want to fire an event when the user select a file. Doing so with .changeevent it works if the user changes the file every time.

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

But I want to fire the event if the user select the same file again.

但是如果用户再次选择相同的文件，我想触发该事件。

1. User select file A.jpg(event fires)
2. User select file B.jpg(event fires)
3. User select file B.jpg(event doesn't fire, I want it to fire)

1. 用户选择文件A.jpg（事件触发）
2. 用户选择文件B.jpg（事件触发）
3. 用户选择文件B.jpg（事件不触发，我希望它触发）

How can I do it?

我该怎么做？

采纳答案by BrunoLM

You can trick it. Remove the file element and add it in the same place on changeevent. It will erase the file path making it changeable every time.

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

Example on jsFiddle.

jsFiddle 上的示例。

Or you can simply use .prop("value", ""), see this example on jsFiddle.

或者您可以简单地使用.prop("value", "")，请参阅jsFiddle 上的此示例。

• jQuery 1.6+ prop
• Earlier versions attr

• jQuery 1.6+ prop
• 早期版本 attr

回答by Wagner Leonardi

If you have tried .attr("value", "")and didn't work, don't panic (like I did)

如果您尝试过.attr("value", "")但没有成功，请不要惊慌（就像我一样）

just do .val("")instead, and will work fine

只是这样做.val("")，并且会正常工作

回答by Mariusz Wiazowski

You can simply set to nullthe file path every time user clicks on the control. Now, even if the user selects the same file, the onchangeevent will be triggered.

每次用户单击控件时，您都可以简单地将文件路径设置为null。现在，即使用户选择了同一个文件，也会触发onchange事件。

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

回答by Trafalgar Law

Use onClick event to clear value of target input, each time user clicks on field. This ensures that the onChange event will be triggered for the same file as well. Worked for me :)

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

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

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

Using TypeScript

使用打字稿

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

回答by braitsch

I got this to work by clearing the file input value onClick and then posting the file onChange. This allows the user to select the same file twice in a row and still have the change event fire to post to the server. My example uses the the jQuery form plugin.

我通过清除文件输入值 onClick 然后发布文件 onChange 来实现此目的。这允许用户连续两次选择同一个文件，并且仍然可以将更改事件触发发布到服务器。我的示例使用jQuery 表单插件。

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

回答by braitsch

This work for me

这对我有用

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

回答by Micheal C Wallas

VueJs solution

VueJs 解决方案

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

回答by MKJ

Inspiring from @braitsch I have used the following in my AngularJS2 input-file-component

受到@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);
    }
}

Here the onClick(event)rescued me :-)

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

回答by Curt

Probably the easiest thing you can do is set the value to an empty string. This forces it to 'change' the file each time even if the same file is selected again.

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

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

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

回答by Heckmann

Here's the React-y way solution i've found that worked for me:

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

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

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