HTML5 code to implement drag-and-drop batch upload of files

This article mainly shares with you the HTML5 code for drag-and-drop batch uploading 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 folders (only supported by chrome).

1. Component Description

1. Drag multiple folders simultaneously

2. Delete the specified folder

3. Display the upload progress bar of the current folder

4. Partial upload of folders exceeding 5M

The effect is as follows:

2. Problems encountered

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. Carry cookies across domains when uploading files

4. Folder Fragmentation

3. Solution process

1. Drag and drop to read the file path under each folder

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

// 拖拽文件夹
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('只支持上传文件夹', '提示', {
      confirmButtonText: '确定'
    })
  }
}

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)
    })
  }
}

2. Progress bar of uploading folder

Files without fragmentation: According to the files in the folder The total number, 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 The percentage of the file. After each file is uploaded successfully, modify the process of the folder.

3. Carrying cookies across domains

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 header:

withCredentials:true

Supplement:

The difference between substring and substr

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

start:Required. 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, and 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 detailed content of HTML5 code to implement drag-and-drop batch upload of files. For more information, please follow other related articles on the PHP Chinese website!