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

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

просто делать и будет работать нормально

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

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

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

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

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

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

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

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

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

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

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

спасибо philiplehmann

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

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

Это решение я написал 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 fuke
  if (inputElement.files[0]) {
    document.getElementById('currentFile').innerHTML = inputElement.files[0].name;
  }
}

</scrip>