Dosya Girişi nasıl temizlenir

Aşağıda, dosya girişini ve bir "Dosyayı Temizle" düğmesini görüntüleyen jquery kodumun bir parçası bulunmaktadır.

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

Şimdi "Dosyayı Temizle" düğmesine sahip olmamın nedeni, düğmeye tıklarsanız, dosya girişindeki her şeyi temizleyecektir. "Dosyayı Temizle" düğmesini tıkladığımda dosya girişini gerçekten temizleyecek şekilde nasıl kodlayabilirim?

Bu çalışmalı:

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

JQuery ile dosya girişini temizleyin

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

Dosya girişini JavaScript ile temizle

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

Benim de kullanmayı sevdiğim yöntem budur ancak herhangi bir olayın yeni nesneye bağlı kalması için bool true parametresini klon yöntemine eklemeniz gerektiğine ve içeriği temizlemeniz gerektiğine inanıyorum.

    var input = $("#fileInput");

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

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

Ayarla $("ID").val(null), benim için çalıştı

React kullanıcıları için

e.target.value = ""

Ancak, dosya giriş öğesi farklı bir öğe tarafından tetiklenirse (bir htmlForözniteliğe sahip) - bu, etkinliğin olmadığı anlamına gelir

Yani bir ref kullanabilirsiniz:

func başlangıcında:

const inputRef = React.useRef();

giriş öğesinde

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

ve sonra bir onClick işlevinde (örneğin) yazabilirsiniz

inputRef.current.value = "" 

• React Sınıflarında - aynı fikir, ancak yapıcıdaki farklılık: this.inputRef = React.createRef()

Bunun tarayıcılar arası yetenekli olduğundan emin olmak istiyorsanız başka bir çözüm, etiketi kaldırmak () ve ardından eklemek () veya başa eklemek () veya başka bir şekilde aynı niteliklere sahip yeni bir girdi etiketi örneğini yeniden eklemektir. .

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

Bu işe yarar

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

Böyle bir şey yaptım ve bu benim için çalışıyor

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

Benim durumumda başka çözümler bu şekilde işe yaramadı:

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

Bununla birlikte, sayfada 1'den fazla dosya girişiniz olacaksa, hepsi üzerindeki metni sıfırlayacaktır.

get input id ve put val aşağıdaki gibi boştur: Not: val boş çift tırnak val ("") arasına boşluk koymayın.

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

bu kod tüm tarayıcılar ve tüm girişler için çalışır.

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