javascript - valor - Borrando<input type=''file''/> usando jQuery

obtener valor de un input jquery

Question

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

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

Pero no está funcionando.

Answer 1

¿Qué? En su función de validación, simplemente ponga

document.onlyform.upload.value="";

Suponiendo que subir es el nombre:

<input type="file" name="upload" id="csv_doc"/>

Estoy usando JSP, no estoy seguro si eso hace una diferencia ...

Funciona para mí, y creo que es mucho más fácil.

Answer 2

El valor de las entradas de archivo es de solo lectura (por razones de seguridad). No puede borrarlo programáticamente (aparte de llamar al método reset () del formulario, que tiene un alcance más amplio que solo ese campo).

Answer 3

En IE8 hicieron que el campo de carga de archivos fuera de solo lectura por seguridad. Vea la publicación del blog del equipo de IE :

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

Para bloquear los ataques que se basan en "robar" las pulsaciones para engañar al usuario de forma secreta 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 cargarlo mediante el cuadro de diálogo Explorar archivo.

Además, la URLAction "Incluir ruta del directorio local al cargar archivos" se ha configurado en "Desactivar" 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 enviará solo el nombre de archivo image.png.

Answer 4

En mi Firefox 40.0.3 solo funciona con esto

 $(''input[type=file]'').val('''');
 $(''input[type=file]'').replaceWith($(''input[type=file]'').clone(true));

Answer 5

Es fácil lol (funciona en todos los navegadores [excepto opera]):

$(''input[type=file]'').each(function(){
    $(this).after($(this).clone(true)).remove();
});

JS Fiddle: http://jsfiddle.net/cw84x/1/

Answer 6

Esto funciona con Chrome, FF y Safari.

$("#control").val("")

Puede que no funcione con IE u Opera

Answer 7

Esto funciona para mi

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

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

Espero eso ayude.

Answer 8

Fácil: envuelve un <form> alrededor del elemento, reinicie la llamada en el formulario y luego elimine el formulario usando unwrap (). A diferencia de las soluciones clone () de lo contrario, en este hilo, terminas con el mismo elemento al final (incluidas las propiedades personalizadas que se configuraron 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 que <button> active un envío.

Editar

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

Answer 9

Funciona para mí en todos los navegadores.

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

Answer 10

Hágalo asíncrono y reinícielo después de que se hayan realizado las acciones deseadas del botón.

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('''').clone(true));
    } 
    </script>

Answer 11

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

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

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

Todo el crédito es 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>

Answer 12

He logrado que esto funcione con lo siguiente ...

function resetFileElement(ele) 
{
    ele.val(''''); 
    ele.wrap(''<form>'').parent(''form'').trigger(''reset'');   
    ele.unwrap();
    ele.prop(''files'')[0] = null;
    ele.replaceWith(ele.clone());    
}

Esto ha sido probado en IE10, FF, Chrome y Opera.

Hay dos advertencias ...

1. Aún no funciona correctamente en FF, si actualiza la página, el elemento de archivo se rellena con el archivo seleccionado. Donde esta obteniendo esta informacion esta mas alla de mi ¿Qué otra cosa relacionada con un elemento de entrada de archivo podría intentar borrar?

2. Recuerde usar la delegación en cualquier evento que haya adjuntado al elemento de entrada de archivo, para que aún funcionen cuando se realice la clonación.

Lo que no entiendo es quién pensó que no permitirle borrar un campo de entrada de una selección de archivo inaceptable no válida fue una buena idea.

De acuerdo, no me permita establecerlo dinámicamente con un valor, por lo que no puedo extraer archivos del sistema operativo de un usuario, pero permítame borrar una selección no válida sin restablecer un formulario completo.

No es como ''aceptar'' hace otra cosa que no sea un filtro y en IE10, ni siquiera entiende los tipos de mimo de MS Word, ¡es una broma!

Answer 13

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

El uso es fácil:

// Clear all file fields: $("input:file").clearInputs(); // Clear also hidden fields: $("input:file").clearInputs(true); // Clear specific fields: $("#myfilefield1,#myfilefield2").clearInputs();

/** * Clears the selected form elements. */ $.fn.clearFields = $.fn.clearInputs = function(includeHidden) { var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // ''hidden'' is not in this list return this.each(function() { var t = this.type, tag = this.tagName.toLowerCase(); if (re.test(t) || tag == ''textarea'') { this.value = ''''; } else if (t == ''checkbox'' || t == ''radio'') { this.checked = false; } else if (tag == ''select'') { this.selectedIndex = -1; } else if (t == "file") { if (/MSIE/.test(navigator.userAgent)) { $(this).replaceWith($(this).clone(true)); } else { $(this).val(''''); } } else if (includeHidden) { // includeHidden can be the value true, or it can be a selector string // indicating a special test; for example: // $(''#myForm'').clearForm(''.special:hidden'') // the above would clean hidden inputs that have the class of ''special'' if ( (includeHidden === true && /hidden/.test(t)) || (typeof includeHidden == ''string'' && $(this).is(includeHidden)) ) this.value = ''''; } }); };

Answer 14

La cosa .clone() no funciona en Opera (y posiblemente en otras). Mantiene el contenido.

El método más cercano aquí para mí fue el de Jonathan, sin embargo, se aseguró de que el campo conservara su nombre, clases, etc., hecho para el código desordenado en mi caso.

Algo como esto podría funcionar bien (gracias a Quentin también):

function clearInput($source) {
    var $form = $(''<form>'')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

Answer 15

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

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

y puedes activar el reinicio usando jQuery con un código similar a este:

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

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

Answer 16

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

Todo lo que tiene que hacer es restablecer el formulario donde se encuentra el campo o si solo desea restablecer la entrada del archivo 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/

Answer 17

Probé con la mayoría de las técnicas mencionadas por los usuarios, pero ninguna de ellas funcionó en todos los navegadores. es decir: clone () no funciona en FF para entradas de archivos. Terminé copiando manualmente la entrada del archivo y luego reemplazando el original por el copiado. Funciona en todos los navegadores.

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type=''file'' class=''"+$fileInput.attr("class")+" id=''fileID'' name=''"+$fileInput.attr("name")+"''/>");
$fileInput.replaceWith($fileCopy);

Answer 18

Pude conseguir el mío trabajando con el siguiente código:

var input = $("#control");    
input.replaceWith(input.val('''').clone(true));

Answer 19

Puedes reemplazarlo con su clon como tal.

var clone = $(''#control'').clone();

$(''#control'').replacewith(clone);

Pero esto se clona con su valor también, así que mejor te guste

var emtyValue = $(''#control'').val('''');
var clone = emptyValue.clone();

$(''#control'').replacewith(clone);

Answer 20

Respuesta rápida: sustitúyelo.

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

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

var control = $("#control");

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

Fiddle: http://jsfiddle.net/jonathansampson/dAQVM/

Si la clonación, al tiempo que conserva los controladores de eventos, presenta algún problema que podría considerar usar la delegación de eventos para manejar los clics en este control desde un elemento principal

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

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

Answer 21

Se supone que Jquery se encarga de los problemas de navegador cruzado / navegador antiguo para usted.

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

Utilizando 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 javascript también me funcionó en los navegadores mencionados anteriormente.

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

En jsfiddle

No tengo forma de probar con IE, pero en teoría 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 debería, en mi opinión, tratarlo con usted, de lo contrario, valdría la pena señalarlo al equipo jquery junto con el método que requiere IE. (Veo que la gente dice "esto no funcionará en IE", pero no hay un javascript de vainilla que muestre cómo funciona en IE (supuestamente una "característica de seguridad"?), Tal vez lo informe como un error para MS también (si lo hicieran cuéntelo como tal), para que se solucione en cualquier versión más reciente)

Como mencioné en otra respuesta, un post en el foro jQuery

 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 de vainilla del método replaceWith .

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 el método cloneNode no conserva los controladores de eventos asociados.

Vea 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 clone ofrece este ^{[* 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 , no funciona de otra manera, por lo que es un poco jquery.data / jquery.data y significa que las cosas no están Compatible entre 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 propio elemento.

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

(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 otros métodos de soporte necesarios para mantener dicha lista, esto es solo una demostración.

Answer 22

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 hasta donde puedo decir.

Answer 23

$("#control).val('''') Todo lo que necesita es $("#control).val('''') ! Probado en Chrome con JQuery 1.11

Answer 24

$("input[type=file]").wrap("<div id=''fileWrapper''/>");
$("#fileWrapper").append("<div id=''duplicateFile''   style=''display:none''>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

Answer 25

function clear() {
    var input = document.createElement("input");
    input.setAttribute(''type'', ''file'');
    input.setAttribute(''value'', '''');
    input.setAttribute(''id'', ''email_attach'');

    $(''#email_attach'').replaceWith( input.cloneNode() );
}