web开发之文件上传的多种实现方式（附代码）

var input = document.querySelector('input[type="file"]')
var file = input.files[0]

console.log(file.name) // 文件名称
console.log(file.size) // 文件大小
console.log(file.type) // 文件类型

var xhr = new XMLHttpRequest()
xhr.open('POST', '/upload/url', true)
xhr.send(file)

var formData = new FormData()
formData.append('file', file, file.name) // 第 3 个参数是文件名称
formData.append('username', 'Mary') // 还可以添加额外的参数

var formData = new FormData(document.querySelector('form'))

var xhr = new XMLHttpRequest()
xhr.open('POST', '/upload/url', true)
xhr.send(formData)

var xhr = new XMLHttpRequest()
xhr.open('POST', '/upload/url', true)
xhr.upload.onprogress = progressHandler // 这个函数接下来定义

function progressHandler(e) {
  var percent = Math.round((e.loaded / e.total) * 100)
}

function progressHandler(e) {
  if (e.lengthComputable) {
    var percent = Math.round((e.loaded / e.total) * 100)
  }
}

var blob = file.slice(0, 1024) // 文件从字节位置 0 到字节位置 1024 那 1KB

function upload(file) {
  let formData = new FormData()
  formData.append('file', file)
  let xhr = new XMLHttpRequest()
  xhr.open('POST', '/upload/url', true)
  xhr.send(formData)
}

var blob = file.slice(0, 1024)
upload(blob) // 上传第一部分

var blob2 = file.slice(1024, 2048)
upload(blob2) // 上传第二部分

// 上传剩余部分

var pos = 0 // 起始位置
var size = 1024 // 块的大小

while (pos <p>服务器接收到分块文件进行重新组装的代码就不在这里展示了</p><p>使用这种方式上传文件会一次性发送多个 HTTP 请求，那么如何处理这种多个请求同时发送的情况呢？方法有很多，可以用 Promise 来处理，让每次上传都返回一个 promise 对象，然后用 Promise.all 方法来合并处理，Promise.all 方法接受一个数组作为参数，因此将每次上传返回的 promise 对象放在一个数组中</p><pre class="brush:php;toolbar:false">var promises = []

while (pos <p>同时改造一下 upload 函数使其返回一个 <span style="color: rgb(255, 0, 0); background-color: rgb(253, 234, 218);">promise</span></p><pre class="brush:php;toolbar:false">function upload(file) {
  return new Promise((resolve, reject) =&gt; {
    let formData = new FormData()
    formData.append('file', file)
    let xhr = new XMLHttpRequest()
    xhr.open('POST', '/upload/url', true)
    xhr.onload = () =&gt; resolve(xhr.responseText)
    xhr.onerror = () =&gt; reject(xhr.statusText)
    xhr.send(formData)
  })
}

Promise.all(promises).then((response) => {
  console.log('Upload success!')
}).catch((err) => {
  console.log(err)
})

var slice = file.slice || file.webkitSlice || file.mozSlice

if (slice) {
  let blob = slice.call(file, 0, 1024) // call
  upload(blob)
} else {
  upload(file) // 不支持分割就只能直接上传整个文件了，或者提示文件过大
}

document.addEventListener('dragover', function(e) {
  e.preventDefault()
  e.stopPropagation()
})

var element = document.querySelector('label')
element.addEventListener('drop', function(e) {
  e.preventDefault()
  e.stopPropagation()

  // ...
})

var file = e.dataTransfer.files[0]
upload(file) // upload 函数前面已经定义

if (iOS) { // iOS 用 navigator.userAgent 判断
  input.removeAttribute('capture')
}

<input>