Comentario: Recientemente, estaba usando el control de carga de archivos y encontré dos problemas de compatibilidad del control de carga de archivo: uno es que el control de carga de archivos no puede cambiar el ancho a través de CSS en Firefox, y el otro es que el control de carga de archivos se ve y se comporta de manera diferente bajo diferentes navegadores. Este artículo proporcionará una solución detallada.
Recientemente, utilicé el control de carga de archivos al usar lienzo para procesar los píxeles de imagen, y encontré dos problemas de compatibilidad con el control de carga de archivos. Una es que el control de carga de archivo no puede cambiar el ancho a través de CSS bajo Firefox, y el otro es que el control de carga de archivo se ve y se comporta de manera diferente en diferentes navegadores.A continuación se muestra una captura de pantalla del control de carga de archivo en IE10, Firefox16, Chrome22, Opera12, Safari5.1.7:
En IE10, haga doble clic en el cuadro de entrada o haga clic en el botón para aparecer el cuadro de selección de archivos. Al hacer clic en el cuadro de entrada, el botón o el texto en otros navegadores, puede activar el cuadro de selección de archivos.
Dada esta confusión, es necesario unificar lo mismo y comportamiento. Aquí está mi solución de compatibilidad.
Primero veamos las capturas de pantalla del resultado final en cada navegador:
Idea básica: cree cuadros de entrada y botones para simular controles de carga de archivos. Establezca el control de carga de archivo en transparente. Haga que el control de carga de archivo alinee a la derecha con el botón utilizado para la simulación. Modifique el orden de apilamiento de los elementos, de modo que los botones estén debajo, el control de carga del archivo está en el medio y el cuadro de entrada está arriba. Después de completar la selección de archivos, asigne el valor en el control de carga de archivo al cuadro de entrada utilizado para la simulación.
Principio: en diferentes navegadores, la altura del botón del control de carga del archivo es ajustable y se puede hacer clic en el lado derecho del control de carga del archivo. Entonces, al ajustar la altura del control de carga de archivo y ajustar la posición del control de carga de archivo (alineado a la derecha), el área de carga en el control del archivo se puede sobrescribir completamente con los botones utilizados para la simulación. Cuando el control de carga de archivo es transparente, el usuario hace clic en el botón para la simulación desencadena el cuadro de selección de archivos. Pero al mismo tiempo, la orden de apilamiento de los controles de carga de archivos no puede precedirse por el cuadro de entrada utilizado para la simulación. De lo contrario, cuando el usuario coloca el mouse en el cuadro de entrada visto, puede ver que el cursor no indica texto sino una flecha (y al hacer clic como una flecha, el cuadro de selección de archivos aparecerá), y el usuario se confundirá.
Implementación: echemos un vistazo al código en la parte HTML primero.
<div>
<input type = "text" value = "file no seleccionado" /> <input type = "button" value = "browse" /> <input type = "file" />
</div>
Luego está el código para la parte CSS.
#archivo {
Posición: relativo;
Ancho: 226px;
Altura: 25px;
borde: 1px #99f sólido;
}
#Entrada de archivos {
tamaño de fuente: 16px;
margen: 0;
relleno: 0;
Posición: relativo;
Align vertical: medio;
Esquema: ninguno;
}
#file input [type = "text"] {
borde: 3px ninguno;
Ancho: 172px;
índice z: 4;
}
#file input [type = "botón"] {
Ancho: 54px;
Altura: 25px;
índice z: 2;
}
#file input [type = "file"] {
Posición: Absoluto;
Derecha: 0px;
Altura: 25px;
Opacidad: 0;
Índice Z: 3;
}
Finalmente, la parte JavaScript se usa para mostrar la ruta del archivo obtenida por el control de carga del archivo en el cuadro de entrada visible.
window.onload = function () {
var file = document.Queryselector ("#archivo file [type = 'file']");
var text = document.Queryselector ("#File Input [type = 'Text']");
file.addeventListener ("cambiar", asignar, falso);
función asignar () {
text.value = file.value;
}
}
Bienvenido a dejar un mensaje para comunicación o corrección.