Mejore los controles de carga de archivos usando jQuery

Cuando se usa CSS para embellecer elementos de formulario, nunca ha habido una buena manera de embellecer el control de carga de archivos. http://www.quirksmode.org/dom/inputfile.html (el sitio web parece tener un error) proporciona un método para embellecer el control de carga de archivos. Inspirándome en este método, combiné mis propios proyectos para mejorar sus funciones. Después de mejoras, tiene las siguientes características:

1. Lo que ve el usuario no es un botón de carga de archivos, sino un botón;
2. El formato de las imágenes puede restringirse;
3. Las imágenes seleccionadas por el usuario se pueden mostrar en un área específica (excepto IE6, safari y opera);
4. El control de carga de archivos permanece disponible cuando el usuario desactiva js.

Lo encapsulé en un complemento de jQuery. Dado que ya existe un complemento llamado jQuery.fakeFile en Internet, para distinguirlo, lo llamaré jQuery.liveFakeFile. Este artículo presentará el principio y el uso de este método.

1. Demanda

El requisito es muy simple, pero su implementación requiere ciertas habilidades, las cuales se describen brevemente a continuación:

1. Se requiere que el control de carga de archivos no aparezca, pero aparece un botón "cargar imagen". Cuando el usuario hace clic en el botón, aparece un cuadro de diálogo de imagen;
2. Después de seleccionar una imagen, la imagen se muestra encima del botón. De forma predeterminada, se muestra la imagen predeterminada;
3. Se juzga el formato de la imagen seleccionada. Una vez que no cumple con los requisitos, se muestra un mensaje de error debajo del botón y se muestra la imagen predeterminada.

2. Análisis

Realice el efecto de abrir el cuadro de diálogo de selección de imagen haciendo clic en el botón

Hay un cuadro de entrada delante del control de carga de texto. Inspirado por Michael McGrady ( ljzcome una vez tradujo este artículo), creamos un botón "cargar imagen", luego cambiamos la propiedad de opacidad del control de carga de archivos y la configuramos en 0. y use la propiedad de posicionamiento para que el área de clic esté encima del botón. De esta manera, cada clic del usuario parece ser un botón en el que se hace clic, pero en realidad es el control de carga de texto en sí.

Mostrar imágenes seleccionadas por el usuario

Mostrar imágenes parece muy simple, pero existen diferencias entre los navegadores. IE6 no puede mostrar imágenes correctamente e IE7 puede mostrarlas usando el filtro AlphaImageLoder. Firefox no puede mostrar imágenes normalmente, pero tiene un método para mostrar imágenes: getAsDataURL(). Otros navegadores Opera y Safari no pueden mostrar imágenes correctamente. Por lo tanto, utilizamos tecnología de rastreo de navegadores para procesar diferentes navegadores por separado y solo permitimos que los navegadores que no pueden mostrar imágenes muestren texto normalmente.

Determinar el formato de la imagen

Solo necesita pasar la verificación de expresión regular cuando se activa el evento de cambio del control de carga de archivos. Una vez que se cumplen los requisitos de formato, se mostrará la imagen o el texto del mensaje; de ​​lo contrario, se mostrará un mensaje de error.

análisis de usabilidad

Debido a que js se usa para cambiar la apariencia del control de carga de archivos, se debe garantizar que los usuarios puedan cargar imágenes normalmente cuando js está deshabilitado. Entonces, lo que colocamos en la estructura html debería ser un control de carga de archivos normal.