usando jQuery'/> usando jQuery'/> usando jQuery'/> Borrar <input type = 'file' /> usando jQuery | programandonet.com

Pregunta Borrar usando jQuery


¿Es posible borrar un <input type='file' /> controlar el valor con jQuery? He intentado lo siguiente:

$('#control').attr({ value: '' }); 

Pero no está funcionando.


506
2018-06-25 13:32


origen


Respuestas:


Fácil: envuelves una <form> alrededor del elemento, llame a restablecer en el formulario, luego elimine el formulario usando unwrap (). A diferencia de las soluciones de clonación () de este hilo, terminas con el mismo elemento al final (incluidas las propiedades personalizadas que se establecieron en él).

Probado y trabajando en Opera, Firefox, Safari, Chrome e IE6 +. También funciona en otros tipos de elementos de formulario, con la excepción de type="hidden".

http://jsfiddle.net/rPaZQ/

function resetFormElement(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();

  // Prevent form submission
  e.stopPropagation();
  e.preventDefault();
}

Como señala Timo a continuación, si tiene los botones para activar el restablecimiento del campo dentro de <form>, debe llamar a preventDefault en el evento para evitar <button> de desencadenar un envío.

Editar

No funciona en IE 11 debido a un error no arreglado. El texto (nombre de archivo) se borra en la entrada, pero su File la lista permanece poblada


505
2017-11-12 20:40



Respuesta rápida: reemplázalo.

En el código a continuación, uso el replaceWith Método jQuery para reemplazar el control con un clon de sí mismo. En el caso de que tenga controladores vinculados a eventos en este control, querremos preservarlos también. Para hacer esto, pasamos true como el primer parámetro de la clone método.

<input type="file" id="control"/>
<button id="clear">Clear</button>
var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

Violín: http://jsfiddle.net/jonathansampson/dAQVM/

Si la clonación, mientras se conservan los manejadores de eventos, presenta cualquier problema, podría considerar usar la delegación de eventos para manejar los clics en este control desde un elemento primario:

$("form").on("focus", "#control", doStuff);

Esto evita la necesidad de clonar controladores junto con el elemento cuando se actualiza el control.


425
2018-05-16 19:40



Se supone que Jquery se ocupará de los problemas de navegador cruzado / anterior para usted.

Esto funciona en navegadores modernos que probé: Chromium v25, Firefox v20, Opera v12.14

Usando jquery 1.9.1

HTML

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

Jquery

$("#clear").click(function () {
    $("#fileopen").val("");
});

En jsfiddle

La siguiente solución de javascript también me funcionó en la mención de navegadores anterior.

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

En jsfiddle

No tengo forma de probar con IE, pero teóricamente esto debería funcionar. Si IE es lo suficientemente diferente como para que la versión de Javascript no funcione porque MS lo ha hecho de otra manera, el método jquery en mi opinión debería tratarlo por usted, de lo contrario valdría la pena señalarlo al equipo de jquery junto con el método que requiere IE. (Veo gente diciendo "esto no funcionará en IE", pero no vainilla javascript para mostrar cómo funciona en IE (supuestamente una "característica de seguridad"?), Tal vez también lo informe como un error para MS (si lo hicieran) contarlo como tal), para que se solucione en cualquier versión más reciente

Como se menciona en otra respuesta, una publicación en el jquery foro

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

Pero jquery ahora ha eliminado el soporte para las pruebas del navegador, jquery.browser.

Esta solución de JavaScript también funcionó para mí, es el equivalente estándar de la jquery.replaceWith método.

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

En jsfiddle

Lo importante a tener en cuenta es que cloneNode método no conserva controladores de eventos asociados.

Mira este ejemplo.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

En jsfiddle

Pero jquery.clone ofrece esto [* 1]

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

En jsfiddle

[* 1] jquery puede hacer esto si los eventos fueron agregados por los métodos de jquery ya que mantiene una copia en jquery.data, de lo contrario no funciona, por lo que es un poco engañoso y significa que las cosas no son compatibles entre los diferentes métodos o bibliotecas.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

En jsfiddle

No puede obtener el controlador de eventos adjunto directamente desde el elemento en sí.

Aquí está el principio general en vainilla javascript, así es como jquery y todas las demás bibliotecas lo hacen (más o menos).

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

En jsfiddle

Por supuesto, jquery y otras bibliotecas tienen todos los demás métodos de soporte necesarios para mantener dicha lista, esto es solo una demostración.


94
2018-06-19 04:42



Por razones obvias de seguridad, no puede establecer el valor de una entrada de archivo, ni siquiera a una cadena vacía.

Todo lo que tiene que hacer es restablecer el formulario donde está el campo o si solo desea restablecer la entrada de un formulario que contiene otros campos, use esto:

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

Aquí hay un ejemplo: http://jsfiddle.net/v2SZJ/1/


47
2018-04-29 08:31



Esto funciona para mí

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

Espero eso ayude.


42
2017-07-27 15:29



En IE8, hicieron que el campo Carga de archivos fuera solo de lectura por seguridad. Ver el Publicación del blog del equipo de IE:

Históricamente, el control de carga de archivos HTML () ha sido la fuente de una gran cantidad de vulnerabilidades de divulgación de información. Para resolver estos problemas, se realizaron dos cambios en el comportamiento del control.

Para bloquear ataques que se basan en "robar" las teclas para engañar subrepticiamente al usuario para que escriba una ruta de archivo local en el control, el cuadro de edición Ruta de archivo ahora es de solo lectura. El usuario debe seleccionar explícitamente un archivo para cargar utilizando el diálogo Explorar archivo.

Además, la opción de URL "Incluir ruta del directorio local al cargar archivos" se ha establecido en "Deshabilitar" para la Zona de Internet. Este cambio evita la fuga de información del sistema de archivos local potencialmente sensible a Internet. Por ejemplo, en lugar de enviar la ruta completa C: \ users \ ericlaw \ documents \ secret \ image.png, Internet Explorer 8 ahora solo enviará el nombre de archivo image.png.


20
2018-01-22 18:16



Me quedé atrapado con todas las opciones aquí. Aquí hay un truco que hice que funcionó:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

y puede activar el restablecimiento usando jQuery con un código similar a este:

$('#file_reset').trigger('click');

(jsfiddle: http://jsfiddle.net/eCbd6/)


12
2017-09-20 16:53



$("#control).val('') ¡es todo lo que necesitas! Probado en Chrome usando JQuery 1.11


10
2018-04-03 04:21



He usado https://github.com/malsup/form/blob/master/jquery.form.js, que tiene una función llamada clearInputs(), que es crossbrowser, bien probado, fácil de usar y maneja también el problema de IE y la eliminación de campos ocultos si es necesario. Tal vez una solución un poco larga para solo ingresar archivos claros, pero si se trata de cargas de archivos crossbrowser, entonces se recomienda esta solución.

El uso es fácil:

// Borrar todos los campos del archivo:
$ ("entrada: archivo"). clearInputs ();

// Borrar también los campos ocultos:
$ ("entrada: archivo"). clearInputs (verdadero);

// Borrar campos específicos:
$ ("# myfilefield1, # ​​myfilefield2"). clearInputs ();
/ **
 * Borra los elementos de formulario seleccionados.
 * /
$ .fn.clearFields = $ .fn.clearInputs = function (includeHidden) {
    var re = / ^ (?: color | fecha | fechahora | correo electrónico | mes | número | contraseña | rango | búsqueda | tel | texto | hora | url | semana) $ / i; // 'oculto' no está en esta lista
    return this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'casilla de verificación' || t == 'radio') {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        }
        else if (t == "archivo") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (this) .replaceWith ($ (this) .clone (true));
            } else {
                $ (this) .val ('');
            }
        }
        else if (includeHidden) {
            // includeHidden puede ser el valor verdadero, o puede ser una cadena de selector
            // indicando una prueba especial; por ejemplo:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // lo anterior limpiaría las entradas ocultas que tienen la clase de 'especial'
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (this) .is (includeHidden)))
                this.value = '';
        }
    });
};

8
2017-08-14 13:36



Terminé con esto:

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

puede que no sea la solución más elegante, pero funciona por lo que yo sé.


6
2018-06-25 13:35