Jak wyczyścić dane wejściowe pliku

Poniżej znajduje się część kodu jquery, który mam, który wyświetla dane wejściowe pliku i przycisk „Wyczyść plik”.

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

Powodem, dla którego mam przycisk "Wyczyść plik" jest to, że jeśli go klikniesz, wyczyści wszystko, co jest w pliku wejściowym. Jak go zakodować, aby faktycznie wyczyścił dane wejściowe pliku po kliknięciu przycisku „Wyczyść plik”?

To powinno działać:

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

Wyczyść dane wejściowe pliku za pomocą jQuery

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

Wyczyść dane wejściowe za pomocą JavaScript

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

Jest to metoda, której również lubię używać, ale uważam, że musisz dodać parametr bool true do metody clone, aby wszelkie zdarzenia pozostały dołączone do nowego obiektu i musisz wyczyścić zawartość.

    var input = $("#fileInput");

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

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

Przez ustawienie $("ID").val(null), pracował dla mnie

dla użytkowników React

e.target.value = ""

Ale jeśli element wejściowy pliku jest wyzwalany przez inny element (z rozszerzeniem htmlFor atrybutem) - będzie to oznaczać, że nie masz zdarzenia

Możesz więc użyć ref:

na początku funkcji:

const inputRef = React.useRef();

na elemencie wejściowym

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

a następnie w funkcji onClick (na przykład) u może pisać

inputRef.current.value = "" 

• w klasach React - ten sam pomysł, ale różnica w konstruktorze: this.inputRef = React.createRef()

Innym rozwiązaniem, jeśli chcesz mieć pewność, że jest to możliwe w różnych przeglądarkach, jest usunięcie () tagu, a następnie dołączenie () lub poprzedzenie () lub w inny sposób ponowne dodanie nowego wystąpienia tagu wejściowego z tymi samymi atrybutami .

<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']"));

To działa

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

Zrobiłem coś takiego i to działa na mnie

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

W moim przypadku inne rozwiązania nie zadziałały niż ten:

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

Jeśli jednak na stronie będzie więcej niż 1 plik wejściowy, tekst wszystkich z nich zostanie zresetowany.

get input id i put val jest puste, jak poniżej: Uwaga: Nie umieszczaj spacji między val pustymi podwójnymi cudzysłowami val ("").

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

ten kod działa dla wszystkich przeglądarek i wszystkich wejść.

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