Varios métodos para cargar imágenes en la interfaz web
A continuación le presentaremos 3 formas de cargar imágenes en el front-end web:
1. Carga de formulario
El método de carga de imágenes más tradicional es. carga de formulario Uso El control de entrada [tipo = "archivo"] del formulario abre el cuadro de diálogo de selección de archivos del sistema, logrando así el propósito de seleccionar y cargar archivos.
Carga de formulario
Debe prestar atención a los siguientes puntos al cargar un formulario:
(1). correo.
(2). El tipo de enc del formulario debe ser multipart/form-data.
(3). Proporcione el campo de entrada de carga tipo "archivo".
2.ajax upload
ajax y FormData pueden lograr el efecto de carga de archivos sin actualizar la página, principalmente utilizando el método ajax() de jQuery y XMLHttpRequest Nivel 2
FormData interfaz. Los objetos FormData se pueden usar para enviar datos de formulario de manera más flexible y conveniente porque se pueden usar independientemente del formulario. Si configura el tipo de codificación del formulario en multipart/form-data, el formato de datos transmitido a través de FormData es el mismo que el formato de datos transmitido por el formulario a través del método enviar().
Carga sin actualización de Ajax
El método de carga sin actualización de Ajax es esencialmente el mismo que la carga de formulario, excepto que el contenido del formulario se envía utilizando ajax y el front-end determina la solicitud. El resultado de la pantalla después de que se devuelve el resultado.
3. Varias cargas de complementos
Cuando los requisitos de carga requieren obtener una vista previa, mostrar el progreso de la carga, interrumpir el proceso de carga, cargar archivos grandes en partes, etc., entonces se carga desde el formulario tradicional. Es difícil implementar estas funciones, podemos hacerlo con la ayuda de complementos existentes.
Por ejemplo, el complemento de carga de Baidu Web Uploader, el complemento de vista previa de imágenes de jQuery imgPreview, el complemento de carga de arrastrar y soltar y vista previa de imágenes Dropzone.js, etc. Puede elegir el complemento apropiado -en función de las necesidades reales del proyecto.