Как определить тип ввода = файл "изменить" для того же файла?

Question

Я хочу запустить событие, когда пользователь выбирает файл.Это происходит с событием .change, оно работает, если пользователь каждый раз меняет файл.

Но я хочу запустить событие, если пользователь снова выберет тот же файл.

1. ПользовательВыбрать файл A.jpg (событие запускается)
2. Пользователь выбирает файл B.jpg (событие запускается)
3. Пользователь выбирает файл B.jpg (событие не запускается, я хочу, чтобы оно сработало)

Как я могу это сделать?

Answer 1

Если вы пытались .attr("value", "") и не работали, не паникуйте (как я)

просто сделайте .val("") вместо этого, и будет нормально работать

Answer 2

Вы можете обмануть это.Удалите элемент file и добавьте его в том же месте на событие 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

Эта работа для меня

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

Answer 7

VueJs решение

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

Answer 8

Вдохновляясь от @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 9

По умолчанию свойство value входного элемента очищается после выбора файлов, если входные данные имеют несколько атрибутов.Если вы не очистите это свойство, событие «change» не будет запущено, если вы выберете тот же файл.Вы можете управлять этим поведением, используя атрибут multiple.

<!-- will be cleared -->
<input type="file" onchange="yourFunction()" multiple/>
<!-- won't be cleared -->
<input type="file" onchange="yourFunction()"/>

Ссылка

Answer 10

Вероятно, самое простое, что вы можете сделать, это установить значение в пустую строку.Это заставляет его «менять» файл каждый раз, даже если один и тот же файл выбирается снова.

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