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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

Пример на jsFiddle.

Или вы можете просто использовать .prop("value", ""), посмотрите этот пример на jsFiddle.

  • JQuery 1. 6+ prop
  • Более ранние версии attr

Ответ 2

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

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

Ответ 3

Вы можете просто установить нулевой путь к файлу каждый раз, когда пользователь нажимает на элемент управления. Теперь, даже если пользователь выберет тот же файл, событие onchange будет запущено.

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

Ответ 4

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

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

Ответ 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 = ''
}

Ответ 6

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

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

Ответ 7

Решение VueJs

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

Ответ 8

Вдохновляясь от @braitsch, я использовал следующее в моем input-file-component AngularJS2

<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) спас меня :-)

Ответ 9

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

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

Ссылка

Ответ 10

Вы не можете создать огонь change здесь (правильное поведение, так как ничего не изменилось). Однако вы могли бы также привязать click... хотя это может срабатывать слишком часто... там не так много промежуточной точки между ними.

$("#fileID").bind("click change", function() {
  //do stuff
});

Ответ 11

Если вы не хотите использовать jQuery

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

Он отлично работает в Firefox, но для Chrome вам нужно добавить this.value=null; после предупреждения.

Ответ 12

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

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

Ответ 13

Вы можете использовать form.reset(), чтобы очистить список входных файлов files. Это будет reset все поля по умолчанию, но во многих случаях вы можете использовать input type='file' в форме для загрузки файлов в любом случае. В этом решении нет необходимости снова клонировать элемент и снова перехватывать события.

Благодаря philiplehmann

Ответ 14

Хорошо, у меня была такая же проблема. Я использовал "вход" (или oninput) событие вместо изменения, и он работал как шарм.

Ответ 15

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

Это решение, которое я написал https://jsfiddle.net/r2wjp6u8/, не вносит много изменений в дерево DOM, оно просто меняет значения поля ввода. С точки зрения производительности это должно быть немного лучше.

Ссылка на скрипку: https://jsfiddle.net/r2wjp6u8/

<button id="btnSelectFile">Upload</button>

<!-- Not displaying the Inputfield because the design changes on each browser -->
<input type="file" id="fileInput" style="display: none;">
<p>
  Current File: <span id="currentFile"></span>
</p>
<hr>
<div class="log"></div>


<script>
// Get Logging Element
var log = document.querySelector('.log');

// Load the file input element.
var inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', currentFile);

// Add Click behavior to button
document.getElementById('btnSelectFile').addEventListener('click', selectFile);

function selectFile() {
  if (inputElement.files[0]) {
    // Check how manyf iles are selected and display filename
    log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
    // Reset the Input Field
    log.innerHTML += '<p>Removing file: ' + inputElement.files[0].name + '</p>'
    inputElement.value = '';
    // Check how manyf iles are selected and display filename
    log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
    log.innerHTML += '<hr>'
  }

  // Once we have a clean slide, open fiel select dialog.
  inputElement.click();
};

function currentFile() {
    // If Input Element has a file
  if (inputElement.files[0]) {
    document.getElementById('currentFile').innerHTML = inputElement.files[0].name;
  }
}

</scrip>

Ответ 16

Таким образом, невозможно на 100% быть уверенным, что они выбирают один и тот же файл, если вы не сохраните каждый файл и не сравните их программно.

То, как вы взаимодействуете с файлами (то, что делает JS, когда пользователь "загружает" файл), - это HTML5 File API и JS FileReader.

https://www.html5rocks.com/en/tutorials/file/dndfiles/

https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser

Эти учебные пособия показывают, как захватывать и читать метаданные (хранящиеся в виде объекта js) при загрузке файла.

Создайте функцию, которая запускает onChange, которая read-> store-> сравнивает метаданные текущего файла с предыдущими файлами. Затем вы можете запустить ваше событие, когда выбран нужный файл.

Ответ 17

Поверьте, это вам обязательно поможет!

// there I have called two 'onchange event functions' due to some different scenario processing.

<input type="file" class="selectImagesHandlerDialog" 
    name="selectImagesHandlerDialog" 
    onclick="this.value=null;" accept="image/x-png,image/gif,image/jpeg" multiple 
    onchange="delegateMultipleFilesSelectionAndOpen(event); disposeMultipleFilesSelections(this);" />


// delegating multiple files select and open
var delegateMultipleFilesSelectionAndOpen = function (evt) {

  if (!evt.target.files) return;

  var selectedPhotos = evt.target.files;
  // some continuous source

};


// explicitly removing file input value memory cache
var disposeMultipleFilesSelections = function () {
  this.val = null;
};

Надеюсь, что это поможет многим из вас, ребята.

Ответ 18

Создайте для входа событие щелчка и событие изменения. Событие click очищает ввод, а событие change содержит код, который вы хотите выполнить.

Таким образом, событие щелчка исчезнет, когда вы нажмете кнопку ввода (до того, как откроются окна выбора файла), поэтому событие изменения всегда будет срабатывать при выборе файла.

$("#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>