Comment effacer l'entrée des fichiers

Question

Voici une partie du code jquery dont je dispose, qui affiche la saisie du fichier et un bouton "Effacer le fichier".

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

La raison pour laquelle j'ai le bouton "Effacer le fichier" est que si vous cliquez sur le bouton, cela effacera tout ce qui se trouve dans l'entrée du fichier. Comment puis-je le coder pour qu'il efface réellement le fichier lorsque je clique sur le bouton "Effacer le fichier" ?

Answer 1

Cela devrait fonctionner :

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

Answer 2

Effacer l'entrée du fichier avec jQuery

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

Effacer l'entrée du fichier avec JavaScript

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

Answer 3

pour les utilisateurs de React

e.target.value = ""

Mais si l'élément d'entrée du fichier est déclenché par un élément différent (avec un élément htmlFor ) - cela signifie que vous n'avez pas l'événement.

Donc vous pourriez utiliser une référence :

au début de la fonction :

const inputRef = React.useRef();

sur l'élément d'entrée

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

et ensuite sur une fonction onClick (par exemple) vous pouvez écrire

inputRef.current.value = "" 

• dans React Classes - même idée, mais différence dans le constructeur : this.inputRef = React.createRef()

Answer 4

C'est la méthode que j'aime utiliser également, mais je crois que vous devez ajouter le paramètre bool true à la méthode de clonage pour que les événements restent attachés au nouvel objet et vous devez effacer le contenu.

    var input = $("#fileInput");

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

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

Answer 5

Get input id et put val est vide comme ci-dessous : Note : Ne pas mettre d'espace entre les guillemets vides val(" ").

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