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.
/i
para case-insensitive, no tiene sentido poner las extensiones en mayuscula y minuscula, con una de ellas basta