Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: gAb1 en 11 Diciembre 2015, 04:46 AM

Título: [Resuelto] resetear/limpiar input type file on click
Publicado por: gAb1 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 (javascript) [Seleccionar]
   window.resetMethod =
   function (e) {
       var input = $(this).parent('div').find('input[type=file]');
       input.val('');
       input.html($('input[type=file]').clone(true));
       return false;
   }


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

Código (html5) [Seleccionar]
<div class="first">
   <!-- este div es creado por el plugin ezdz y es donde aparece el preview -->
   <div>Drop a file</div>
   <input type="file" name="file[]" accept="image/jpeg" />
   <div class="arrow_box hide"><a href="#" onClick="return resetMethod($(this));">Quitar imagen</a></div>
</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!
Título: Re: resetear/limpiar input type file on click
Publicado por: eLank0 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 (javascript) [Seleccionar]

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  button {
    margin: 4px;
    cursor: pointer;
  }
  input {
    margin: 4px;
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>
  <button>Clear Input</button>
</div>
<input type="text" value="click a button">

<script>
$( "button" ).click(function() {
  var text = $( this ).text();
  $( "input" ).val('');
});
</script>

</body>
</html>

Salu22!!
Título: Re: resetear/limpiar input type file on click
Publicado por: gAb1 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 (javascript) [Seleccionar]
$('body').on('click', 'a', function() {
    console.log('click works');
    div = $(this).parent().parent();
    div.find('input[type=file]').val('');
    div.children().first().removeClass('ezdz-enter ezdz-accept');
    div.find('div div').html('Arrastrar imagen');
    div.find('.arrow_box').addClass('hide');
});


Y yo complicandome la vida...  ;D