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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.