1

espero que puedan ayudarme con el siguiente problema:

Tengo una validación de archivo PDF en mi aplicación web pero no sé como validar que si el usuario mete un archivo docx o de otra extensión desde el navegador no lo permita o lo elimine del campo. Por el momento solo tengo validado el tamaño del archivo y funciona bien.

Espero que puedan ayudarme.

Saludos!

$('input[type="file"]').on('change', function(){
//console.log($(this)[0].files[0].size);
if ($(this).val() !='') {
    if($(this)[0].files[0].size > 1048576){
        console.log("El documento excede el tamaño máximo");
        $('#modal-title').text('¡Precaución!');
        $('#modal-msg').html("Se solicita un archivo no mayor a 1MB. Por favor verifica.");
        $("#modal-gral").modal();           
        $(this).val('');
    }else{
        $("#modal-gral").hide();                    
    }   
}
});
0

3 respuestas 3

3

Solo debes modificar tu input file de esta manera, lo que hago es que al input le estoy permitiendo solamente aceptar los archivos en pdf y en jquery estoy tomando el valor del campo haciendo un split para separar la extensión del archivo, tomar el ultimo valor del arreglo que es la extensión y preguntando si es PDF para que permita hacer o no permita hacer algo.

$('input[type="file"]').on('change', function(){
  var ext = $( this ).val().split('.').pop();
  if ($( this ).val() != '') {
    if(ext == "pdf"){
      alert("La extensión es: " + ext);
      if($(this)[0].files[0].size > 1048576){
        console.log("El documento excede el tamaño máximo");
        $('#modal-title').text('¡Precaución!');
        $('#modal-msg').html("Se solicita un archivo no mayor a 1MB. Por favor verifica.");
        $("#modal-gral").modal();           
        $(this).val('');
      }else{
        $("#modal-gral").hide();
      }
    }
    else
    {
      $( this ).val('');
      alert("Extensión no permitida: " + ext);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="application/pdf" />

8
  • el tema con tu respuesta, es que no valida solo es una sugerencia pero si se puede cargar archivo de otro tipo con este codigo
    – Derleguan
    Commented el 27 ago. 2018 a las 15:22
  • Víctor Perdomo ya lo coloque en los input eo que colocas pero el usuario puede seleccionar otro archivo con otra extensión desde su navegador de archivos... por eso quiero validar de otra forma para que solo sea PDF Commented el 27 ago. 2018 a las 15:23
  • Ya modifique la respuesta con la solución en javascript prueba a ver Commented el 27 ago. 2018 a las 15:24
  • voy a implementar tu código, a ver como resulta :) Commented el 27 ago. 2018 a las 15:25
  • Sigue sin funcionar Víctor Perdomo, si le colocó cualquier archivo no lo valida Commented el 27 ago. 2018 a las 15:28
1

Hay 2 soluciones,

Solución 1

Podrías hacer la validación en el input file para que solo acepte documentos PDF.

<input name="pdf" type="file" accept="application/pdf" />

Con esto el usuario ya no podrá ingresar nada más que pdf.

Solución 2

Se puede realizar la comprobación con JQuery de la siguiente forma

if($(this)[0].files[0].type != "application/pdf"){
   //mensaje de error
}
1
  • ¿No es raro que con esta regla también se permitan archivos con extensión .html y documentos .doc? Commented el 19 dic. 2021 a las 2:08
0

para realizar la validacion de la extencion es nesesario usar js, te dejo un ejemplo donde respondi algo similar

Cómo restringir un input file para aceptar formatos de imagenes?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <style media="screen">
	#uploadForm,
	#imagePreview{
		width: 350;
		margin: 0 auto;
	}

	img{
		max-width: 350px;
		height: 0 auto;
		max-height: 300px;
	}
</style>
						
						<div class="col-sm-12">

						<div class="col-sm-12" id="imagePreview">
							
						</div>

						<div class="col-sm-12">
							<div class="form-group" style="background-color: #c8dadf;border-radius: 5px;padding-left: 50px;padding-bottom: 50px">
								<br>												
								<div class="col-sm-12">
									<p style="text-align: center;"><b>Cargar Foto</b></p>						
									<input type="file" class="form-control-file" id="imagedoc" name="imagedoc"  accept="image/*" >										
								</div>
							</div>
						</div>
							
						</div>

						<input id="btn_Agregar_Usuario" type="submit" name="submit" class="submit btn btn-success" value="Terminar" />

<script type="text/javascript">
(function(){
	function filePreview(input){
		if (input.files && input.files[0]){
			var reader = new FileReader();

			reader.onload = function(e){
				$('#imagePreview').html("<img src='"+e.target.result+"' />");
			}

			reader.readAsDataURL(input.files[0]);
		}
	}

	$('#imagedoc').change(function(el){
  if(LimitAttach(this,1))
		  filePreview(this);
	});
})();
</script>
<script type="text/javascript">
function LimitAttach(tField,iType) {
	file=tField.value;
	if (iType==1) {
	extArray = new Array(".pdf");
	}	
	allowSubmit = false;
	if (!file) return false;
	while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1);
  ext = file.slice(file.indexOf(".")).toLowerCase();
  for (var i = 0; i < extArray.length; i++) {
    if (extArray[i] == ext) {
      allowSubmit = true;
      break;
	}
	}
	if (allowSubmit) {
  return true
	} else {
	tField.value="";
	alert("Usted sólo puede subir archivos con extensiones " + (extArray.join(" ")) + "\n Reiniciando Formulario");
return false;
	setTimeout("location.reload()",2000);
	}
	}	
</script>

Saludos

1
  • tu solución está bien amigo pero ando trabajando con un bootstrap y si coloco modificación de estilos lo rompe todo por las clases que vienen por default en el framework, sin embargo ya comentaron la respuesta que yo necesitaba para mi aplicación. Muchas gracias por tu apoyo Commented el 27 ago. 2018 a las 16:04

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.