3

tengo el siguiente codigo en js para validar si un archivo es una imagen y si pesa maximo 2mb que lo ejecuto cuando el campo #foto1 cambia de valor (se ha escogido un archivo).

$('#foto1').change(sizefoto1);

function sizefoto1()
{   var archivo=document.getElementById("foto1");
    var ext=/(.jpg|.JPG|.jpeg|.JPEG|.png|.PNG)$/i;
    var tam= document.getElementById("foto1").files[0].size;
    {
        if(!ext.exec(ruta))
        {
            swal("NO es imagen","El archivo no es una imagen jpg, jpeg","error");
            $("#foto1").val("");
            $("#foto1").html("");
        }
        else
        {
            if(tam>2097152)
            {
                swal("Archivo demasiado grande","Los archivos deben pesar menos de 2MB","error");
                $("#foto1").val("");
                $("#foto1").html("");
            }
        }
    }
}

Pero quisiera modificarlo ya que tengo que escribir ese codigo cada vez que voy a subir un archivo; a veces en un form tengo hasta 6 archivos a subir. Quisiera convertirlo a una funcion para solo llamarla y pasarle como parámetro el nombre del campo y el tipo de archivo que quiero que valide (imagen o pdf o doc, o xls).

Si alguien sabe como hacerlo agradecería su colaboracion.

1
  • 1
    Si vas a usar el modificador /i para case-insensitive, no tiene sentido poner las extensiones en mayuscula y minuscula, con una de ellas basta
    – Pipe
    el 18 may. 2022 a las 18:48

1 respuesta 1

10

Si lo haces de este modo los filtra todos a la vez:

$('input[type="file"]').change(sizefoto1)

function sizefoto1() {
  let ruta = $(this).val();
  switch ($(this).attr('data-ext')) {
    case 'jpg':
      var ext = /(.jpg|.JPG|.jpeg|.JPEG|.png|.PNG)$/i;
      break;
    case 'pdf':
      var ext = /(.pdf|.PDF)$/i;
      break;
    case 'doc':
      var ext = /(.doc|.DOC)$/i;
      break;
    default:
      alert('Ha ocurrido un error. Este campo input carece de filtro!');
      return;
  }
  var tam = this.files[0].size; {
    if (!ext.exec(ruta)) {
      swal("NO es " + $(this).attr('data-ext'), "El archivo no es " + $(this).attr('data-ext'), "error");
      $(this).val("");
      $(this).html("");
    } else {
      if (tam > 2097152) {
        swal("Archivo demasiado grande", "Los archivos deben pesar menos de 2MB", "error");
        $(this).val("");
        $(this).html("");
      }
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<input type="file" id="foto1" data-ext="jpg">
<input type="file" id="pdf1" data-ext="pdf">
<input type="file" id="doc1" data-ext="doc">
<input type="file" id="gif1" data-ext="gif">

Explicación:

  • En el HTML agregamos un nuevo atributo, por ejemplo, data-ext donde vamos a poner un valor que nos indica el tipo de archivo esperado para ese input, por ejemplo:
<input type="file" id="foto1" data-ext="jpg">
  • Aplicamos la misma función a todos los input de tipo file mediante esta instrucción:
$('input[type="file"]').change(sizefoto1)

Aclaración: Eso no impide que puedas usarlo como antes si te es mas conveniente o por los motivos que sea no quieres hacerlo con todos a la vez, es decir, puedes seguir usando $('#foto1').change(sizefoto1); para cada uno de ellos con su respectivo id y no hacerlo de forma global como estoy sugeriendo.

  • En la función definimos ruta, la cual no tienes definida en tu pregunta (gracias @Bryro por tu aporte y corrección) de este modo:
let ruta = $(this).val();
  • Dentro de la función consultamos el valor del atributo data-ext del elemento actual (this) para establecer el filtro correcto a aplicar despues en la variable ext mediante un switch() y sus posibles case:
switch ($(this).attr('data-ext')) {
  • Dentro de la función, en lugar de forzar siempre el mismo input con id foto1, usamos el this para referenciar al elemento que ha lanzado el evento

A partir de ahi puedes hacer las variaciones que te convengan.

Nota: Ten en cuenta que esto puede darte la falsa sensación que estás controlando el tipo de archivos que estas subiendo al servidor, pero tan solo usando HTML y javascript eso no es cierto pues pueden conseguir subir otros archivos esquivando esta supuesta validación. Te recomiendo que, además de esta verificación, tengas otra verificación a nivel del script del servidor que va a gestionar dichos archivos para estar al 100% seguro que no esquivan esta primera comprobación de algun modo.

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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