Complemento de carga de archivos en línea mediante arrastrar y soltar: DropzoneJS
DropzoneJS es una biblioteca de código abierto que proporciona la función de arrastrar y soltar archivos y obtener una vista previa de imágenes. No tiene dependencias y es altamente personalizable.
Documentación oficial: //p> <. /p>
Versión china: .dropzone/
Introducción a nuestra página
Este es el efecto demostrado en el sitio web oficial. Si desea utilizar este efecto, puede hacerlo. Vaya directamente a la carpeta dist del paquete de código fuente. Copie el estilo en . dropzone no procesará los archivos que cargue en el servidor. Debe escribir su propio código para recibir y guardar los archivos cargados.
Todo lo que necesitamos hacer es crear un elemento de formulario con el nombre de clase dropzone:
Dropzone encontrará todos los elementos de formulario que contengan dropzone en su atributo de clase, y listo, suba un El archivo se procesará normalmente, como si fuera un fragmento de código HTML:
El formulario no necesita procesar los archivos cargados.
No tiene que estar en el formulario, también puedes usar código js para inicializar la instancia de dropzone
O si usas jquery, también puedes escribirlo así
Hay dos Hay tres formas de configurar Dropzone.
Estas son algunas características de configuración de las zonas de entrega
Cuando se agrega un archivo a una zona de entrega, su estado se establecerá en Dropzone.QUEUED, lo que significa que el archivo ya está en la cola de carga. . Si la opción autoProcessQueue se establece en verdadero, la cola se procesa inmediatamente y después de que un archivo se coloca en la zona o se completa la carga, se llama a .processQueue() para verificar cuántos archivos se están cargando actualmente. Si autoProcessQueue se establece en falso, el método .processQueue() no se llama implícitamente. Esto significa que cuando desee cargar todos los archivos en la cola, deberá llamar al método usted mismo.
Se puede personalizar configurandopreviewTemplate, y su apariencia es la siguiente
En el contenedor (dz-preview), dz-processing es el estilo que se muestra cuando se carga el archivo. dz -success es el estilo que se muestra cuando el archivo se carga correctamente y dz-error es el estilo que se muestra cuando el archivo no se carga. El último elemento, data-dz-errormessage, contendrá la información de texto devuelta por el servidor. Si desea reescribir, puede consultar la configuración proporcionada en el sitio web oficial
Si desea eliminar el. mensaje de texto que se ha agregado al archivo dropzone, puede llamar a .removeFile(archivo). Este método también desencadena el evento removefile. El siguiente es un ejemplo de cómo eliminar archivos después de cargarlos.
Si desea eliminar todos los archivos, simplemente llame al método removeAllFiles(). Para conocer los métodos de operación detallados, consulte la documentación oficial.
Para activar un evento mientras se procesa un archivo, puede llamar al evento on(eventName, callbackFunction), que es el mismo método proporcionado en la documentación oficial. nombre del evento, función de devolución de llamada), puede registrar fácilmente un detector de eventos en la instancia, preferiblemente en la configuración inicial
O puede hacer esto, pero es completamente innecesario
Aquí está el lista de eventos proporcionada en la documentación oficial
Hoy en día, cuando la mayoría de los equipos utilizan modelos ágiles, cuando estás trabajando en un proyecto, es posible que no tengas mucho tiempo para hacer algo solo.
En un mundo donde la mayoría de los equipos adoptan modelos de desarrollo ágiles, es posible que no tenga mucho tiempo para reescribir algo que ya existe, y los complementos de terceros pueden proporcionar rápidamente una excelente solución, por lo que, ya sea que esté estudiando o trabajando, los complementos de terceros ¡Son un buen intento para que puedas aprender a voluntad sin afectar tu trabajo!