Як очистити введення файлів

Нижче наведена частина коду 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 (наприклад) u може писати

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('');

Однак, якщо у вас буде більше 1 файлу на сторінці, це скине текст на всіх них.

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

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

цей код працює для всіх браузерів та всіх входів.

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