¿Cómo puedo borrar una entrada de archivo HTML con JavaScript?

Quiero borrar la entrada del archivo en mi formulario.

Sé cómo configurar las fuentes con el mismo método ... Pero ese método no borrará la ruta del archivo seleccionado.

Nota : Me gustaría evitar tener que volver a cargar la página, restablecer el formulario o realizar una llamada AJAX.

es posible?

¿Qué hay de eliminar ese nodo y crear uno nuevo con el mismo nombre?

Hay 3 formas de borrar la entrada de archivos con javascript:

1. Establezca la propiedad de valor en vacío o nulo.

   Funciona para IE11 + y otros navegadores modernos.

2. Cree un nuevo elemento de entrada de archivo y reemplace el anterior.

   La desventaja es que perderá oyentes de eventos y propiedades de expansión.

3. Restablezca el formulario del propietario a través del método form.reset ().

   Para evitar afectar a otros elementos de entrada en el mismo formulario de propietario, podemos crear un nuevo formulario vacío y agregar el elemento de entrada de archivo a este nuevo formulario y restablecerlo. De esta manera funciona para todos los navegadores.

Escribí una función de JavaScript. demostración: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl; dr : para navegadores modernos, solo use

input.value = '';

Vieja respuesta:

Qué tal si:

input.type = "text";
input.type = "file";

Todavía tengo que entender por qué esto no funciona con webkit .

De todos modos, esto funciona con IE9>, Firefox y Opera.
La situación con webkit es que parece que no puedo volver a cambiarlo a archivo.
Con IE8, la situación es que arroja una excepción de seguridad.

Editar: para webkit, Opera y firefox esto funciona, sin embargo:

input.value = '';

(verifique la respuesta anterior con esta propuesta)

Veré si puedo encontrar una manera más limpia de hacer este navegador cruzado sin la necesidad del GC.

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

Funciona con la mayoría de los navegadores. No funciona con IE <9, eso es todo.
Probado en Firefox 20, Chrome 24, Opera 12, IE7, IE8, IE9 e IE10.

Establecer el valor en ''no funciona en todos los navegadores.

En su lugar, intente configurar el valor para que me nullguste

document.getElementById('your_input_id').value= null;

EDITAR: Obtengo las razones de seguridad muy válidas para no permitir que JS configure la entrada del archivo, sin embargo, parece razonable proporcionar un mecanismo simple para borrar la selección de salida. Intenté usar una cadena vacía pero no funcionó en todos los navegadores, NULLfuncionó en todos los navegadores que probé (Opera, Chrome, FF, IE11 + y Safari).

EDITAR: tenga en cuenta que la configuración de NULLfunciona en todos los navegadores mientras que la configuración de una cadena vacía no lo hizo.

Lamentablemente, ninguna de las respuestas anteriores parece cubrir todas las bases, al menos no con mis pruebas con vanilla javascript.

• .value = nullparece funcionar en Firefox, Chome, Opera e IE11 (pero no en IE8 / 9/10)

• .cloneNode(y .clone()en jQuery) en FireFox parece copiar el .valueover, haciendo que el clon no tenga sentido.

Así que aquí está la función de Javascript de vainilla que he escrito que funciona en FireFox (27 y 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... estos son los únicos navegadores disponibles actualmente a mí para probarlo.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

El ctrlparámetro es la entrada del archivo en sí, por lo que la función se llamaría como ...

clearFileInput(document.getElementById("myFileInput"));

SOLUCIÓN

El siguiente código funcionó para mí con jQuery. Funciona en todos los navegadores y permite preservar eventos y propiedades personalizadas.

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

MANIFESTACIÓN

Vea este jsFiddle para código y demostración.

ENLACES

• Borrar <input type = 'file' /> usando jQuery

• Cómo restablecer la entrada de archivos con JavaScript

U necesita reemplazarlo con una nueva entrada de archivo. Así es como se puede hacer con jQuery:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

y use esta línea cuando necesite borrar el campo de entrada (en algún evento, por ejemplo):

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

Editar:
este no funciona en IE y Opera, pero parece funcionar para Firefox, Safari y Chrome.

Estaba teniendo el mismo problema y se me ocurrió esto.

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

Eso es realmente bastante fácil.

document.querySelector('#input-field').value = '';

He estado buscando una forma simple y limpia de borrar la entrada de archivos HTML, las respuestas anteriores son geniales, pero ninguna de ellas responde realmente a lo que estoy buscando, hasta que encontré en la web una forma simple y elegante de hacerlo:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

Todo el crédito va para Chris Coyier .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

Las respuestas anteriores ofrecen soluciones algo torpes por las siguientes razones:

1. No me gusta tener wrapel inputprimero y luego obtener el html, es muy complicado y sucio.

2. El navegador cruzado JS es útil y parece que en este caso hay demasiadas incógnitas para usar el typecambio de manera confiable (que, de nuevo, es un poco sucio) y configurarlo valueen''

Entonces le ofrezco mi solución basada en jQuery:

$('#myinput').replaceWith($('#myinput').clone())

Hace lo que dice, reemplaza la entrada con un clon de sí mismo. El clon no tendrá el archivo seleccionado.

Ventajas:

1. Código simple y entendible
2. Sin envoltura torpe o cambio de tipo
3. Compatibilidad cruzada con el navegador (corrígeme si me equivoco aquí)

Resultado: programador feliz

Aquí están mis dos centavos, los archivos de entrada se almacenan como una matriz, así que aquí es cómo anularlo

document.getElementById('selector').value = []

esto devuelve una matriz vacía y funciona en todos los navegadores

Lo que me ayudó es que traté de buscar y cargar el último archivo seleccionado usando un bucle, en lugar de borrar la cola, y funcionó. Aquí está el código.

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

Espero que esto pueda ayudar a algunos.

Probé la mayoría de las soluciones, pero no parecía que nadie trabajara. Sin embargo, encontré un paseo por debajo.

La estructura de la forma es: form=> label, inputy submit button. Después de elegir un archivo, la etiqueta mostrará el nombre de archivo al hacerlo manualmente en JavaScript.

Entonces, mi estrategia es: inicialmente, el envío buttonestá deshabilitado, después de elegir un archivo, el disabledatributo del botón enviar se eliminará de modo que pueda enviar el archivo. Después de enviar, borro lo labelque hace que parezca que borro el archivoinput pero en realidad no. Luego, deshabilitaré el botón Enviar nuevamente para evitar que envíe el formulario.

Al configurar el envío button disableo no, dejo de enviar el archivo muchas veces a menos que elija otro archivo.

Cambié para escribir texto y volver a escribir en el archivo usando setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}