html - navegadores - formatos de video para paginas web
¿Cómo obtengo una entrada de archivo html5 para aceptar solo ciertos tipos de archivos de manera consistente en todos los navegadores? (4)
Primero: ¿definitivamente tienes un doctype html5?
<!DOCTYPE html>
Porque si no lo has hecho, puede que no funcione en algunos lugares.
Segundo: en lugar de usar html, puedes usar javascript o jquery. Vea esta pregunta / respuesta: jquery - Verifique la extensión del archivo antes de cargarlo
Tercero: en mi experiencia, algunas cosas de html5 simplemente no funcionan a veces. No tengo idea de por qué, pero se hace necesario solucionar los problemas mediante el uso de jquery, por ejemplo.
Siempre debe hacer una validación del lado del servidor de todos modos para asegurarse de que lo que el usuario está cargando es, de hecho, a lo que lo ha limitado.
De acuerdo con esta respuesta en Stack Overflow , podemos establecer el atributo de accept de un <input type="file" /> para filtrar la entrada aceptada, de la siguiente manera:
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
Sin embargo, como puede observar al ejecutar el siguiente fragmento de código , Chrome 43.0. Algo parece ignorar esta configuración, mientras que Firefox 39.0 lo entiende perfectamente.
Consideré cambiar a un enfoque más directo, utilizando:
accept=".xls, .xlsx"
... que funciona bien en Chrome pero confunde a Firefox , aceptando solo los archivos con la extensión .xlsx .
Teniendo en cuenta que esto es probablemente muy común y básico, debo faltar algo: ¿dónde estoy metiendo la pata? ¿Cómo obtengo una entrada de archivo html5 para sugerir que solo los archivos .xls y .xlsx forma coherente en todos los navegadores?
Aquí hay un fragmento de código que ilustra mi problema (junto con un enlace de JSFiddle en caso de que quieras jugar con él).
Accepts application/vnd.ms-excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>
Quitar espacio en
accept=".xls, .xlsx"
a
accept=".xls,.xlsx"
Funciona en Chrome 69 y Firefox 61. Todavía no lo he probado en Safari, IE y Edge.
Transfiere ambos mime-type y extension
<input type="file" name="file2" accept="text/csv, .csv"/>
DESCARGO DE RESPONSABILIDAD: Esta no es una respuesta de ninguna manera, sino simplemente una nota al potencial de otros lectores que intentan usar este atributo de una manera incorrecta.
En esta referencia no oficial de W3C del atributo de accept , puede encontrar lo siguiente:
Consejo: No utilice este atributo como herramienta de validación. Las cargas de archivos deben validarse en el servidor.
No se recomienda usar este atributo para la validación, ya que los usuarios podrían, de alguna manera, evitarlo y no todos los navegadores se comportan igual.