restringir la selección de carga de archivos a tipos específicos

Question

De todos modos, para restringir la selección de tipos de archivos a través del elemento <input type="file" />? Por ejemplo, si quería cargar solo tipos de imágenes, restringiría las posibles selecciones a (image/jpg, image/gif, image/png), y el cuadro de diálogo de selección anularía los archivos de otros tipos mime. .

p.s. Sé que puedo hacer esto después del hecho con File API escaneando los atributos .type. Estoy tratando de restringir esto antes. También sé que puedo hacerlo a través de flash, pero NO quiero tener flash de uso para esto.

Answer 1

Hay un atributo html para este propósito específico llamado accept pero tiene poco soporte en todos los navegadores. Debido a esta validación del lado del servidor se recomienda en su lugar.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> 

Si no tiene acceso al backend echar un vistazo a una solución basada en Flash como SWFUpload.

Ver más sobre esto aquí: File input 'accept' attribute - is it useful?

Answer 2

Es mejor dejar que el usuario seleccione cualquier archivo, a continuación, comprobar su tipo - esto es mejor soportado por los navegadores:

var 
    file = (el[0].files ? el[0].files[0] : el[0].value || undefined), 
    supportedFormats = ['image/jpg','image/gif','image/png']; 

if (file && file.type) { 
    if (0 > supportedFormats.indexOf(file.type)) { 
     alert('unsupported format'); 
    } 
    else { 
     upload(); 
    } 
} 

también puede comprobar para el tamaño del archivo usando la propiedad file.size.