Очистка поля загрузки файла HTML через JavaScript

Question

Я хочу сбросить поле загрузки файла, когда пользователь выбирает другую опцию.

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

По сути, я хочу что-то вроде (псевдокод):

// Choose selecting existing file
$('#select-file').bind('focus', function() {
  // Clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// Choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // Clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;

Answer 1

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

Имеется такая форма, как:

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

Прямой путь DOM:

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    var newInput = document.createElement("input"); 

    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

Простой способ DOM. Это может не работать в старых браузерах, которые не любят ввод файлов:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

Способ jQuery:

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

Сброс всей формы с помощью jQuery: https://stackoverflow.com/a/13351234/1091947

Answer 2

Просто теперь в 2014 году элемент ввода с идентификатором поддерживает функцию val('').

Для ввода -

<input type="file" multiple="true" id="File1" name="choose-file" />

Это js очищает элемент ввода -

$("#File1").val('');

Answer 3

Да, элемент загрузки защищен от прямых манипуляций в разных браузерах. Однако вы можете удалить элемент из дерева DOM, а затем вставить новый вместо него с помощью JavaScript. Это дало бы вам тот же результат.

Что-то вроде:

$('#container-element').html('<input id="upload-file" type="file"/>');

Answer 4

Код, который я использовал, был,

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

Спасибо всем за предложения и указатели!

Answer 5

Простое решение:

document.getElementById("upload-files").value = "";

Answer 6

очень нравится, чтобы все было так просто:)

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');

Answer 7

Они не получают события фокуса, поэтому вам придется использовать такой трюк: единственный способ очистить его - очистить всю форму

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>

Answer 8

Этот jQuery работал для меня в IE11, Chrome 53 и Firefox 49:

cloned = $("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);

Answer 9

Короче version, который идеально подходит для меня следующим образом:

document.querySelector('#fileUpload').value = "";

Answer 10

Для совместимости, когда ajax недоступен, установите .val (''), иначе будет повторно отправлен последний загруженный ajax файл, который все еще присутствует во входных данных. Следующее должно правильно очищать ввод, сохраняя события .on ():

var input = $("input[type='file']");
input.html(input.html()).val('');