Как очистить ввод файла

Ниже приведена часть имеющегося у меня кода jquery, который отображает ввод файла и кнопку «Очистить файл».

var $imagefile = $('<input />').attr({
    type: 'file',
    name: 'imageFile',
    class: 'imageFile'
});

$image.append($imagefile);

var $imageclear = $('<input />').attr({
    type: 'button',
    name: 'imageClear',
    class: 'imageClear',
    value: 'Clear File'
});

$image.append($imageclear);

Теперь причина, по которой у меня есть кнопка «Очистить файл», заключается в том, что если вы нажмете на кнопку, она очистит все, что находится во входном файле. Как мне его закодировать, чтобы он действительно очищал ввод файла, когда я нажимаю кнопку «Очистить файл»?

Это должно работать:

$imageClear.on('click', function() { 
    $imageFile.val(''); 
});

Очистить ввод файла с помощью jQuery

$("#fileInputId").val(null);

Очистить ввод файла с помощью JavaScript

document.getElementById("fileInputId").value = null;

Мне тоже нравится этот метод, но я считаю, что вам нужно добавить параметр bool true в метод clone, чтобы любые события оставались привязанными к новому объекту, и вам нужно очистить содержимое.

    var input = $("#fileInput");

    function clearInput() {
        input = input.val('').clone(true);
    };

https://api.jquery.com/clone/

По настройке $("ID").val(null)работал у меня

для пользователей React

e.target.value = ""

Но если элемент ввода файла запускается другим элементом (с htmlForатрибутом) - это будет означать, что у вас нет события

Итак, вы можете использовать ссылку:

в начале функции:

const inputRef = React.useRef();

на элементе ввода

<input type="file" ref={inputRef} />

а затем в функции onClick (например) вы можете написать

inputRef.current.value = "" 

• в React Classes - та же идея, но разница в конструкторе: this.inputRef = React.createRef()

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

<form method="POST" enctype="multipart/form-data">
<label for="fileinput">
 <input type="file" name="fileinput" id="fileinput" />
</label>
</form>

$("#fileinput").remove();
$("<input>")
  .attr({
    type: 'file',
    id: 'fileinput',
    name: 'fileinput'
    })
  .appendTo($("label[for='fileinput']"));

Это работает

 $("#yourINPUTfile").val("");

Я сделал что-то подобное, и у меня это работает

$('#fileInput').val(null); 

В моем случае другие решения не сработали, кроме этого:

$('.bootstrap-filestyle :input').val('');

Однако, если на странице будет введено более одного файла, текст будет сброшен для всех из них.

получить входной идентификатор и поставить val пусто, как показано ниже: Примечание: не помещайте пробел между val пустыми двойными кавычками val ("").

 $('#imageFileId').val("")

этот код работает для всех браузеров и всех входов.

$('#your_target_input').attr('value', '');