1

Tengo un código hecho en para aceptar cierto tipo de extensión de archivos, como se muestra a continuación, pero lo que debo realizar es que solo aparezcan en la ventana emergente el tipo de archivos permitidos y no todos como me aparezca a mí. Ejemplo: si deseo abrir un xlsx solo debe de aparece ese y no imágenes o vídeos

$(document).on('change', 'input[type="file"]', function() {
  var fileName = this.files[0].name;
  var fileSize = this.files[0].size;
  var ext = fileName.split('.').pop();

  switch (ext) {
    case 'xlsx':
      $('#tamanoArchivo').text(fileSize + " bytes");
      break;
    case 'csv':
      $('#tamanoArchivo').text(fileSize + " bytes");
      break;
    default:
      alert('El archivo no tiene la extensión adecuada');
      this.value = ''; // reset del valor
      this.files[0].name = '';
      break;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<body>
	<input id="campoFile" accept=”application/vnd.openxmlformats-officedocument.spreadsheetml.sheet” name="archivo" type="file" value="" />
	<p id="tamanoArchivo"></p>
</body>

</html>

3
  • No creo que sea posible desde la ventana emergente, input['file'] es muy restrictivo stackoverflow.com/a/37832463/1160992. Commented el 11 dic. 2018 a las 22:52
  • 1
    Fijate si esto funciona: <input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">. stackoverflow.com/questions/5796537/…
    – Juan
    Commented el 12 dic. 2018 a las 0:39
  • 1
    El problema es que tienes mal las comillas del atributo accept. Si te fijas tienes ” en vez de " (seguramente por un copy/paste). Cámbialas por " y te funcionará.
    – Kiko_L
    Commented el 12 dic. 2018 a las 14:10

1 respuesta 1

1

puedes hacerlo asi:

$(document).on('change','input[type="file"]',function(){			
			
			var fileName = this.files[0].name;
			var fileSize = this.files[0].size;

				var ext = fileName.split('.');
                // ahora obtenemos el ultimo valor despues el punto
                // obtenemos el length por si el archivo lleva nombre con mas de 2 puntos
                ext = ext[ext.length-1];

				switch (ext) {
					case 'xlsx':
						$('#tamanoArchivo').text(fileSize+" bytes en "+ext);
					break;	
					case 'csv': 
						$('#tamanoArchivo').text(fileSize+" bytes "+ext);
					break;
					default:
						alert('El archivo no tiene la extensión adecuada');
						this.value = ''; // reset del valor
						this.files[0].name = '';
					break;	
				}
		});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>


</head>
<body>
<input id="campoFile" accept=”application/vnd.openxmlformats-officedocument.spreadsheetml.sheet” name="archivo" type="file" value="" />
	<p id="tamanoArchivo"></p>
</body>
</html>

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.