elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] resetear/limpiar input type file on click
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] resetear/limpiar input type file on click  (Leído 4,891 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
[Resuelto] resetear/limpiar input type file on click
« en: 11 Diciembre 2015, 04:46 am »

Tengo un formulario que sube imagenes y muestra un preview de estas y me gustaría hacer un botón para limpiar el input.

He estado buscando varias soluciones pero de momento ninguna me ha servido. Ahora mismo estoy probando lo siguiente:

Código
  1.    window.resetMethod =
  2.    function (e) {
  3.        var input = $(this).parent('div').find('input[type=file]');
  4.        input.val('');
  5.        input.html($('input[type=file]').clone(true));
  6.        return false;
  7.    }
  8.  

No funciona ninguno de los dos, ni el val() ni el clone().

Código
  1. <div class="first">
  2.    <!-- este div es creado por el plugin ezdz y es donde aparece el preview -->
  3.    <div>Drop a file</div>
  4.    <input type="file" name="file[]" accept="image/jpeg" />
  5.    <div class="arrow_box hide"><a href="#" onClick="return resetMethod($(this));">Quitar imagen</a></div>
  6. </div>

Pero no está funcionando. ¿Hay algún problema con el código? Alomejor se puede hacer de otra manera, incluso más sencillo.

Gracias!


« Última modificación: 14 Diciembre 2015, 22:10 pm por #!drvy » En línea

eLank0
eLhAcKeR r00Lz


Desconectado Desconectado

Mensajes: 1.062



Ver Perfil WWW
Re: resetear/limpiar input type file on click
« Respuesta #1 en: 11 Diciembre 2015, 09:59 am »

Algo raro debes hacer de más, porque .val(value) funciona correctamente. He hecho un plunkr con el ejemplo de la web de jQuery adaptado a tu ejemplo:

http://plnkr.co/edit/dbRbQnHkwN1cnlikpP76?p=preview
Código
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="utf-8">
  5.  <title>val demo</title>
  6.  <style>
  7.  button {
  8.    margin: 4px;
  9.    cursor: pointer;
  10.  }
  11.  input {
  12.    margin: 4px;
  13.    color: blue;
  14.  }
  15.  </style>
  16.  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  17. </head>
  18. <body>
  19.  
  20. <div>
  21.  <button>Clear Input</button>
  22. </div>
  23. <input type="text" value="click a button">
  24.  
  25. <script>
  26. $( "button" ).click(function() {
  27.  var text = $( this ).text();
  28.  $( "input" ).val('');
  29. });
  30. </script>
  31.  
  32. </body>
  33. </html>
  34.  
Salu22!!


En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: resetear/limpiar input type file on click
« Respuesta #2 en: 11 Diciembre 2015, 18:51 pm »

Si cierto, es muy raro xD

Voy a quitar el onclick y usar JQuery click(). No sé porque me complico tanto si es muy sencillo. Voy a probar y ahora edito.

Vale ahora si que funciona:

Código
  1. $('body').on('click', 'a', function() {
  2.    console.log('click works');
  3.    div = $(this).parent().parent();
  4.    div.find('input[type=file]').val('');
  5.    div.children().first().removeClass('ezdz-enter ezdz-accept');
  6.    div.find('div div').html('Arrastrar imagen');
  7.    div.find('.arrow_box').addClass('hide');
  8. });

Y yo complicandome la vida...  ;D
« Última modificación: 11 Diciembre 2015, 21:04 pm por gAb1 » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
input type « 1 2 »
PHP
JJely 16 5,707 Último mensaje 8 Febrero 2010, 18:59 pm
por KrossPock
Que devuelve el <input type="file"> sin ningun fichero ???? (solucionado)
Desarrollo Web
-=[ §ÂßÂÑÐØ ]=- 1 4,268 Último mensaje 11 Mayo 2011, 17:44 pm
por -=[ §ÂßÂÑÐØ ]=-
estilo a formulario <input type="text">[RESUELTO]
Desarrollo Web
basickdagger 1 1,114 Último mensaje 12 Septiembre 2014, 23:33 pm
por #!drvy
input type file no sube archivos
Desarrollo Web
gAb1 0 1,723 Último mensaje 7 Noviembre 2015, 05:41 am
por gAb1
[Pregunta]: ¿Como puedo vaciar un input type FILE?
Desarrollo Web
Leguim 2 835 Último mensaje 17 Febrero 2019, 14:57 pm
por Leguim
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines