Sample code for HTML5 drag-and-drop batch upload of files

This component is implemented based on Vue.js. The UI framework is elementUI. The complete demo address is at https://github.com/Msxiaoma/upload-folder. Drag and drop to upload the folder (only supported by chrome)

1. Drag and drop multiple folders at the same time
2. Delete specified folder
3. Display the upload progress bar of the current folder
4. Upload folders exceeding 5M in parts

The effect is as follows:

1. Drag and drop to read the file path under each folder
2. How to display the progress bar of the currently uploaded folder
3. Carrying cookies across domains when uploading files
4. Folder fragmentation

When performing a drag-and-drop operation, the DataTransfer object is used to save the data that is dragged to the browser through the drag-and-drop action. It can save one or more data, one or more data types

 // Drag folder 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) } }}// Determine whether it is a folder checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('Only supports uploading folders', 'Prompt', { confirmButtonText: 'OK' }) }}traverseFileTree (item, path, parentDir ) { path = path || '' if (item.isFile) { item.file((file) => { let obj = { file: file, path: path + 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 < entries.length; i++) { entries[i].attr = item.attr this.traverseFileTree(entries[i], path + item.name + '/', temp) } }, function (e) { console.log(e) }) }}

Files without fragmentation: Based on the total number of files in the folder, calculate the percentage of each file in the folder. When a file is uploaded successfully, modify the folder process;

Fragmented files: After calculating the percentage of each file in the file, calculate the percentage of each file in the file. After each file is uploaded successfully, modify the process of the folder.

When the server sets the response header

Access-Control-Allow-Origin: You must specify a clear domain name that is consistent with the requested web page and cannot be *. Access-Control-Allow-Credentials: true

Set request headers:

withCredentials:true

Replenish:

substr(start [, length ]) returns a substring of the specified length starting at the specified position.

start: required option. The starting position of the desired substring. The first character in the string has index 0.

length: optional. The number of characters that should be included in the returned substring.

substring returns the substring located at the specified position in the String object. Returns a string containing the substring from start to the end (excluding end).

start: Indicates the starting position of the substring, and the index starts from 0.

end: Indicates the end position of the substring, the index starts from 0.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.