2

Tengo la siguiente función.

function readURL(input) {
   if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
         $('#preview').attr('src', e.target.result);
      };
      reader.readAsDataURL(input.files[0]);
   }
}

Y quiero poder llamarla con la id file, pero dejando esta preparada para que si quiero volver a usarla con la id file_2, poder hacerlo. Estoy muy verde en esto. Yo he empezado con esto:

$('#file').change(function () {
   $(this).
});

Pero en el $(this). me quedo bloqueado. Alguien me ayuda?

3
  • Si tienes el document Ready de jquery (hasta que no carga el documento no se ejecutan las funciones de jquery) puedes definir una variable GLOBAL. por tanto, cuando quieras puedes asignar ese valor de la id a la variable global y recogerla en cualquier función.
    – EduBw
    Commented el 29 ago. 2018 a las 7:04
  • La verdad no entendí. ¿Quieres llamar la función con el código de abajo? Commented el 29 ago. 2018 a las 7:12
  • 1
    Lo que quiere él hacer es recuperar un valor de la variable accediendo con el this. Es más sencillo debajo del ready(function() { declarar una variable Global y accedes desde cualquier lado del código.
    – EduBw
    Commented el 29 ago. 2018 a las 7:35

1 respuesta 1

2

En tu selector jquery para .change deberías incluir ambos ids. Luego por como tienes tu función readURL deberías simplemente pasarle this a tu función, ya que this es el propio input dentro de .change.

function readURL(input) {
  if (input.files && input.files[0]) {
      console.log(input.files[0]);
      var reader = new FileReader();

      reader.onload = function (e) {
          $('#preview')
              .attr('src', e.target.result);
      };

      reader.readAsDataURL(input.files[0]);
  }
}

$(document).ready(function() {
  $('#file, #file_2').change(function () {
      readURL(this);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" id="file" />
  <input type="file" id="file_2" />
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.