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
    Commented 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

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.