Skip to main content
3 de 6
Agregado switch
masterguru
  • 16k
  • 5
  • 15
  • 28

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

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

function sizefoto1() {
  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)
  • 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.

masterguru
  • 16k
  • 5
  • 15
  • 28