Пример кода для пакетной загрузки файлов с помощью перетаскивания HTML5

Этот компонент реализован на основе Vue.js. Платформа пользовательского интерфейса — elementUI. Полный демонстрационный адрес находится по адресу https://github.com/Msxiaoma/upload-folder. Перетащите папку, чтобы загрузить ее (поддерживается только Chrome).

1. Перетащите несколько папок одновременно
2. Удалить указанную папку
3. Отображение индикатора выполнения загрузки текущей папки
4. Загружать папки размером более 5 млн по частям

Эффект следующий:

1. Перетащите, чтобы прочитать путь к файлу в каждой папке.
2. Как отобразить индикатор выполнения загруженной в данный момент папки
3. Перенос файлов cookie между доменами при загрузке файлов
4. Фрагментация папок

При выполнении операции перетаскивания объект DataTransfer используется для сохранения данных, которые перетаскиваются в браузер с помощью действия перетаскивания. Он может сохранять один или несколько данных, один или несколько типов данных.

 // Перетаскиваем папку 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) } }}// Определяем, является ли это папкой checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('Поддерживается только загрузка папок', 'Prompt', { ConfirmButtonText: 'OK' }) }}traverseFileTree (item, path, ParentDir) { путь = путь || if (item.isFile) { item.file((file) => { let obj = { файл: файл, путь: путь + file.name, attr: item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { for (let я = 0; я <записи.длина; я++) {записи[i].attr = item.attr this.traverseFileTree(записи[i], путь + имя_элемента + '/', temp) } }, function (e) { console.log(e) }) }}

Файлы без фрагментации: на основе общего количества файлов в папке рассчитайте процентную долю каждого файла в папке. После успешной загрузки файла измените процесс папки;

Фрагментированные файлы: после расчета процента каждого файла в файле рассчитайте процент каждого файла в файле. После успешной загрузки каждого файла измените процесс работы с папкой.

Когда сервер устанавливает заголовок ответа

Access-Control-Allow-Origin: необходимо указать четкое доменное имя, которое соответствует запрошенной веб-странице и не может быть *. Access-Control-Allow-Credentials: true

Установите заголовки запроса:

с учетными данными: правда

Пополнить:

substr(start [, length ]) возвращает подстроку указанной длины, начиная с указанной позиции.

начало: обязательный параметр. Начальная позиция желаемой подстроки. Первый символ строки имеет индекс 0.

длина: необязательно. Количество символов, которое должно быть включено в возвращаемую подстроку.

substring возвращает подстроку, расположенную в указанной позиции в объекте String. Возвращает строку, содержащую подстроку от начала до конца (исключая конец).

начало: указывает начальную позицию подстроки, индекс начинается с 0.

конец: указывает конечную позицию подстроки, индекс начинается с 0.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.