Cómo borrar la entrada de archivo

A continuación se muestra parte del código jquery que tengo que muestra la entrada del archivo y un botón "Borrar archivo".

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

Ahora, la razón por la que tengo el botón "Borrar archivo" es porque si hace clic en el botón, se borrará todo lo que esté en la entrada del archivo. ¿Cómo lo codifico para que realmente borre la entrada del archivo cuando hago clic en el botón "Borrar archivo"?

Esto debería funcionar:

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

Borrar la entrada de archivos con jQuery

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

Borrar la entrada de archivos con JavaScript

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

Este es el método que también me gusta usar, pero creo que debe agregar el parámetro bool true al método de clonación para que cualquier evento permanezca adjunto con el nuevo objeto y debe borrar el contenido.

    var input = $("#fileInput");

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

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

Al establecer $("ID").val(null), funcionó para mí

para los usuarios de React

e.target.value = ""

Pero si el elemento de entrada del archivo es activado por un elemento diferente (con un htmlForatributo), eso significará que no tienes el evento.

Entonces podrías usar una referencia:

al comienzo de la función:

const inputRef = React.useRef();

en el elemento de entrada

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

y luego en una función onClick (por ejemplo) puede escribir

inputRef.current.value = "" 

• en React Classes: la misma idea, pero diferencia en el constructor: this.inputRef = React.createRef()

Otra solución si desea estar seguro de que esto es compatible con varios navegadores es eliminar () la etiqueta y luego agregar () o anteponer () o de alguna otra manera volver a agregar una nueva instancia de la etiqueta de entrada con los mismos atributos .

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

Esto funciona para

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

He hecho algo como esto y me está funcionando

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

En mi caso, otras soluciones no funcionaron de esta manera:

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

Sin embargo, si tiene más de 1 entrada de archivo en la página, restablecerá el texto en todos ellos.

get input id y put val está vacío como se muestra a continuación: Nota: No ponga espacio entre val comillas dobles vacías val ("").

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

este código funciona para todos los navegadores y todas las entradas.

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