type example bootstrap html file file-upload

html - example - Muestre texto personalizado para los filtros de tipo de archivo aplicados en el cuadro de diálogo de archivo para cargar una categoría particular de archivos



upload file html5 (1)

La respuesta corta

Como esperaba, esto no es posible . El <input type="file" /> es uno de los elementos del navegador más protegidos y, por lo tanto, los elementos del navegador menos adaptables. La razón por la que los navegadores manejan las entradas de archivos con tanto cuidado es porque no querrían correr el riesgo de que los atacantes accedan a sus archivos (incluso ver su estructura de carpetas sería malo).

La respuesta larga

Es posible que no pueda cambiar libremente el texto visible en el cuadro de filtro, pero hay esperanza. De hecho, en algunas situaciones es posible elegir el texto que aparece. Un gran inconveniente es que esto no es totalmente compatible con el navegador y probablemente no sea compatible con el sistema operativo .

También hay otra razón por la que podría ser una mala idea para los navegadores permitir la edición de ese texto, se podría usar para engañar a los usuarios (por ejemplo, un texto como We''re watching you o FATAL WINDOWS ERROR podría asustar a los usuarios). Además, no debería, pero podría conducir a posibles explotaciones en las que los usuarios intentan ejecutar algún tipo de código C en el campo, otorgándoles acceso a la máquina y posiblemente dañando su computadora de manera catastrófica.

Anteriormente dije que es posible cambiar el filtro-texto visible. A continuación, me ocupo de algunas de las cosas que probé, pero no dude en probarlo usted mismo en este código que creé con fines de prueba: https://codepen.io/JohannesB/pen/vKGoyE

Posible inspiración para otros tipos de archivos que no probé (no dude en editar esta publicación): https://stackoverflow.com/a/14839673/1493235

Selección de parámetros de aceptación de archivos que creo que podrían dar resultados interesantes: application / msword, application / rtf, application / octet-stream, application / octet-stream exe, application / zip, text / css, text / html, text / plain

Conclusiones notables

  • Los tres navegadores difieren en los tipos de archivos asociados con image/* , video/* y audio/*
  • Internet Explorer es el único navegador que entiende Video/x-msvideo avi
  • Firefox y Chrome comprenden la Aplication/pdf con un filtro de texto personalizado, pero IE no lo hace.
  • Chrome es el único navegador que entiende Text/* y que tiene un título de texto personalizado para .exe
  • Los títulos de filtro personalizados nunca se aplican para entradas de aceptación combinadas , en absoluto en ninguno de los navegadores.

Un camino no investigado.

Podría ser posible que para los que suben en Flash este texto sea personalizable, pero lo dudo mucho. Además, el flash está en desuso, por lo que en mi opinión no vale la pena intentarlo.

Los resultados del experimento

Descargo de responsabilidad: los ejemplos utilizados a continuación se ejecutaron en una máquina con Windows 7, utilizando Internet Explorer v11.0.9600, Chrome v51.0.2704.84m y Firefox v46.0.1. No puedo garantizar que representan información correcta sobre otros sistemas operativos, otras versiones del navegador o incluso las mismas versiones del navegador. Utilice esta información con cuidado.

Explorador de Internet

Audio/*

Solicitud/*

Aplicación / pdf

Imagen/*

Texto/*

Vídeo/*

Video / x-msvideo avi

.exe

Imagen / *, Video / *

Imagen / *, .exe

Cromo

Audio/*

Solicitud/*

Aplicación / pdf

Imagen/*

Texto/*

Vídeo/*

Video / x-msvideo avi

.exe

Imagen / *, Video / *

Imagen / *, .exe

Mozilla Firefox

Audio/*

Solicitud/*

Aplicación / pdf

Imagen/*

Texto/*

Vídeo/*

Video / x-msvideo avi

.exe

Imagen / *, Video / *

Imagen / *, .exe

Lo siguiente permitirá a los usuarios seleccionar solo una categoría específica de archivos de imagen.

<input id="file" type="file" name="file" size="30" accept="image/jpg,image/png,image/jpeg,image/gif" />

Pero, el problema es que mostraría "Archivos personalizados" como descripción del archivo en el cuadro de diálogo del archivo que confundirá a los usuarios sobre qué tipo de archivo deberían seleccionar.

Mi pregunta es: ¿Existe una mejor manera de modificar el texto "Archivos personalizados" a "Archivos de imagen"?

Nota: Si proporciono "imagen / *" que mostraría "Archivos de imagen" en la descripción del archivo, pero NO QUIERO PERMITIR al usuario para seleccionar TODOS los tipos de archivos de imagen, solo quiero restringirlos a formatos específicos.

Gracias por su opinión por adelantado.