0

Intento validar la extensión de una imagen con javascript, pero no sé en qué estoy fallando, necesito saber dónde colocar la llamada a la función y si está bien lo que estoy haciendo, es con jquery:

(function() {
  'use strict';

  //Cambiar icono del input de tipo file
  $('.input-file').each(function() {
    var $input = $(this),
        $label = $input.next('.js-labelFile'),
        labelVal = $label.html();

        var extensiones = ".png";
        function validar(datos) {
          var ruta = datos.value;
          var extension = ruta.substring(ruta.lastIndexOf('.') + 1).toLowerCase();
          var extensionValida = extensiones.indexOf(extension);

          if(extensionValida < 0) {
            console.log("Extension no valida");
            return false;
          }else {
            if (element.target.value) fileName = element.target.value.split('\\').pop();
            fileName ? $label.addClass('has-file').find('.js-fileName').html(fileName) : $label.removeClass('has-file').html(labelVal);
            $(".alert").removeClass("invisible");
          }
        }
  //Esto permite el cambio
   $input.on('change', function(element) {
      var fileName = '';
      validar(this);

   });
  });

})();
1
  • Cual es el problema? Funciona correctamente(o por lo menos a mi).
    – Einer
    el 31 mar. 2018 a las 13:17

1 respuesta 1

2

El problema está aquí:

if(extensionValida < 0) {
    console.log("Extension no valida");
    return false;
}else {
    if (element.target.value) fileName = element.target.value.split('\\').pop();
        fileName ? $label.addClass('has-file').find('.js-fileName').html(fileName) : $label.removeClass('has-file').html(labelVal);
    $(".alert").removeClass("invisible");
}

Si la extensión es válida, estás utilizando element.target.value está variable no existe.

Sería más sencillo si en vez de pasar la referencia al input, pasara el objeto file. Aquí te dejo un ejemplo.

Mi propuesta para este código

var $input = $('#file');
var valid_extensions = ['png', 'jpg'];
    $input.on('change', function (e) {
        var $this = this;
        var files = $this.files;

        // If there is more than one file
        if(files) {
            if ($this.files.length > 1) {

                 // TODO: loop for more one file

            } else {

                var file = this.files[0];
                if(validar_extension(file)) {
                    // TODO: Upload file
                
                    alert('Valid extension');
                } else {
                    
                     // Show Error
                     alert('Invalid extension');
                }

            }
        }
    });

    // CHECK FILE EXTENSION
    function validar_extension(file) {
        var file_name = file.name,
        file_extension = file_name.split('.').pop();

        return valid_extensions.includes(file_extension);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <form class="upload-form">
    <div class="form-group">
      <label for="file">Selecciona un archivo</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1"><i class="fa fa-file"></i></span>
        </div>
        <input type="file" id="file" class="input-file form-control">
      </div>
      <span class="form-text d-none validation-msg"></span>
    </div>
  </form>
</div>

He creado la función validar_extension(file): bool que sólo hace lo que tiene que hacer, decirme si es válida o no la extensión del archivo que recibe.

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.