<input type = "file"> límite de archivos seleccionables por extensiones

Question

¿Cómo alguien puede limitar los archivos que se pueden seleccionar con el elemento input = "file" por extensiones ...?

Ya conozco el atributo accept, pero en Chrome limita los archivos por el último tipo MIME definido (en este caso "gif") y FF4 ni siquiera limita nada.

<input type="file" accept="image/jpg, image/gif"> 

¿Hago algo mal? ¿O hay otra manera?

Thy para cualquier consejo ...

Answer 1

serio, la mejor manera de limitar los archivos está en el lado del servidor. Las personas pueden falsificar el tipo de archivo en el cliente, por lo que tomar el nombre completo del archivo en el momento de la transferencia del servidor, analizar el tipo de archivo y luego devolver un mensaje suele ser la mejor opción.

Answer 2

NOTA: Esta respuesta es a partir de 2011. Fue una respuesta muy buena en ese entonces, pero a partir de 2015, las propiedades HTML nativos son compatibles con la mayoría de navegadores, por lo que no es (por lo general) no hay necesidad de poner en práctica tales lógica personalizada JS. Ver Edi's answer y the docs.

---

Antes de que se ha cargado el archivo, se puede comprobar la extensión del archivo usando Javascript, y prevenir el formulario se presenta si no coincide. El nombre del archivo que se cargará se almacena en el campo "valor" del elemento de formulario.

Aquí hay un ejemplo simple que sólo permite que los archivos que terminan en ".gif" para ser subido:

<script type="text/javascript"> 
    function checkFile() { 
     var fileElement = document.getElementById("uploadFile"); 
     var fileExtension = ""; 
     if (fileElement.value.lastIndexOf(".") > 0) { 
      fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length); 
     } 
     if (fileExtension.toLowerCase() == "gif") { 
      return true; 
     } 
     else { 
      alert("You must select a GIF file for upload"); 
      return false; 
     } 
    } 
</script> 

<form action="upload.aspx" enctype="multipart/form-data" onsubmit="return checkFile();"> 
    <input name="uploadFile" id="uploadFile" type="file" /> 

    <input type="submit" /> 
</form> 

Sin embargo, este método no es infalible. Sean Haddy tiene razón en que siempre quiere verificar el lado del servidor, ya que los usuarios pueden vencer su comprobación de Javascript desactivando JavaScript o editando su código una vez que llega a su navegador. Definitivamente verifique el lado del servidor además de la verificación del lado del cliente. También recomiendo comprobar el tamaño del servidor, para que los usuarios no bloqueen el servidor con un archivo de 2 GB (no hay forma de que yo sepa de verificar el tamaño del archivo en el lado del cliente sin usar Flash o un applet de Java o algo así)

Sin embargo, revisar el lado del cliente de antemano con el método que he dado aquí sigue siendo útil, ya que puede evitar errores y es un impedimento menor para las travesuras no graves.

Answer 3

function uploadFile() { 
    var fileElement = document.getElementById("fileToUpload"); 
     var fileExtension = ""; 
     if (fileElement.value.lastIndexOf(".") > 0) { 
      fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length); 
     } 
     if (fileExtension == "odx-d"||fileExtension == "odx"||fileExtension == "pdx"||fileExtension == "cmo"||fileExtension == "xml") { 
     var fd = new FormData(); 
     fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 
     var xhr = new XMLHttpRequest(); 
     xhr.upload.addEventListener("progress", uploadProgress, false); 
     xhr.addEventListener("load", uploadComplete, false); 
     xhr.addEventListener("error", uploadFailed, false); 
     xhr.addEve`enter code here`ntListener("abort", uploadCanceled, false); 
     xhr.open("POST", "/post_uploadReq"); 
     xhr.send(fd); 
     } 
     else { 
      alert("You must select a valid odx,pdx,xml or cmo file for upload"); 
      return false; 
     } 

     } 

probamos este, funciona muy bien

Answer 4

Una forma sencilla de hacerlo sería:

<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx"> 

funciona con todos los navegadores, excepto IE9. No lo he probado en IE10 +.