[Resuelto] resetear/limpiar input type file on click

gAb1 · 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!

eLank0 · 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!!

gAb1 · 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...

Test Foro de elhacker.net SMF 2.1

[Resuelto] resetear/limpiar input type file on click

gAb1

eLank0

gAb1