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

Question

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

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

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

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

Answer 1

Если вы не хотите использовать 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; после предупреждения.

Answer 2

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

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

Answer 3

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

// 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;
};

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

Answer 4

Таким образом, невозможно на 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, которая будет читать-> хранить-> сравнивать метаданные текущего файла с предыдущими файлами. Затем вы можете запустить событие, когда выбран нужный файл.

Answer 5

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

Это решение, которое я написал 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>

Answer 6

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

Благодаря philiplehmann