Código de muestra para carga por lotes de archivos HTML5 mediante arrastrar y soltar

Este componente se implementa en base a Vue.js. El marco de la interfaz de usuario es elementUI. La dirección de demostración completa está en https://github.com/Msxiaoma/upload-folder. Arrastre y suelte para cargar la carpeta (solo es compatible con Chrome).

1. Arrastra y suelta varias carpetas al mismo tiempo
2. Eliminar la carpeta especificada
3. Mostrar la barra de progreso de carga de la carpeta actual
4. Subir carpetas que superen los 5M en partes

El efecto es el siguiente:

1. Arrastre y suelte para leer la ruta del archivo debajo de cada carpeta
2. Cómo mostrar la barra de progreso de la carpeta cargada actualmente
3. Llevar cookies entre dominios al cargar archivos
4. Fragmentación de carpetas

Al realizar una operación de arrastrar y soltar, el objeto DataTransfer se utiliza para guardar los datos que se arrastran al navegador mediante la acción de arrastrar y soltar. Puede guardar uno o más datos, uno o más tipos de datos.

 // Arrastrar carpeta dropFolders (e) { e.stopPropagation() e.preventDefault() var items = e.dataTransfer.items for (var i = 0; i < items.length; i++) { var item = items[ i] .webkitGetAsEntry() if (item) { this.checkFolders(item) } }}// Determinar si es una carpeta checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('Solo admite la carga de carpetas', 'Preguntar', { confirmButtonText: 'OK' }) }}traverseFileTree (elemento, ruta, parentDir) { ruta = ruta || '' if (item.isFile) { item.file((archivo) => { let obj = { archivo: archivo, ruta: ruta + file.name, attr: item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { for (let i = 0; i < entradas.longitud; i++) { entradas[i].attr = item.attr this.traverseFileTree(entradas[i], ruta + elemento.nombre + '/', temp) } }, función (e) { console.log(e) }) }}

Archivos sin fragmentación: según la cantidad total de archivos en la carpeta, calcule el porcentaje de cada archivo en la carpeta. Cuando un archivo se cargue correctamente, modifique el proceso de la carpeta;

Archivos fragmentados: después de calcular el porcentaje de cada archivo en el archivo, calcule el porcentaje de cada archivo en el archivo. Después de que cada archivo se cargue correctamente, modifique el proceso de la carpeta.

Cuando el servidor establece el encabezado de respuesta

Access-Control-Allow-Origin: debe especificar un nombre de dominio claro que sea coherente con la página web solicitada y no puede ser *. Control de acceso-Permitir-Credenciales: verdadero

Establecer encabezados de solicitud:

con Credenciales: verdadero

Reponer:

substr(inicio [, longitud]) devuelve una subcadena de la longitud especificada comenzando en la posición especificada.

inicio: opción requerida. La posición inicial de la subcadena deseada. El primer carácter de la cadena tiene índice 0.

longitud: opcional. El número de caracteres que deben incluirse en la subcadena devuelta.

subcadena devuelve la subcadena ubicada en la posición especificada en el objeto Cadena. Devuelve una cadena que contiene la subcadena desde el principio hasta el final (excluyendo el final).

inicio: indica la posición inicial de la subcadena y el índice comienza desde 0.

final: indica la posición final de la subcadena, el índice comienza desde 0.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.