Question

我正在尝试使用javascript上传多张图片。我能够将一张图片上传得很好 - 但是当我上传n张图片时，它只会上传该组的第一张图片n次。代码如下：

var field = document.getElementById('file-field')

field.addEventListener('change', function(data) {
  var files  = data.target.files

  for(var i=0; i<files.length; i++) {
    multipartPost('/photos/create', files[i]) // I've tried moving this out into another function, an IIFY, etc
  }
})

function multipartPost(url, params, callback) {
  var xml  = new XMLHttpRequest()
  var data = new FormData()
  data.append('file', params, false) // This is where I fixed it so it can at least upload synchronously by passing false as a third param

  xml.open('post', url)
  xml.send(data)

  xml.onreadystatechange = function() {
    if(xml.readyState===4) {
      if(xml.status===200) {
        console.log('success')
      } else {
        console.log(xml.status, "Error")
      }
    }
  }
}

有关如何上传所有图片或者为什么反复上传单张图片n次的想法？

更多背景知识：

我最初有一个表单，我会提交上传文件，但后来我决定通过javascript上传它。事实证明，使用XHR2非常简单，我能够成功上传没有表格的文件 - html就是

<input type="file" name="file" id="file-field" multiple />

但是我决定进入下一步并允许多次上传。我认为它就像在for循环中将文件[0]更改为文件[i]一样简单，但是如果我上传多个文件，它只需要第一个文件并上传n次，n是文件的数量。在文件字段中。

更新

我能够使用同步发布请求获取多个文件上传，方法是将第三个值false的参数传递给函数XMLHttpRequest.open，因此肯定存在与a-sync相关的错误。我会继续调试，但如果有人知道为什么它不是异步工作我很好奇

解决方案

var field = document.getElementById('file-field')

field.addEventListener('change', function(e) {
  var files  = e.target.files
  for(var i = 0; i < files.length; i++) {
    multipartPost('/photos/create', files[i], appendPhoto)
  }
})

function appendPhoto(data) {
  // Callback function
}

function multipartPost(url, params, callback) {
  var xml  = new XMLHttpRequest()
  var data = new FormData() // Using FormData allows me to keep my server-side code the same, just as if it were a form submission
  data.append('file', params)

  xml.open('post', url) // No third param will default to async: true
  xml.setRequestHeader("X-Requested-With","XMLHttpRequest") // This header allows me to recognize the request as xhr server side
  xml.send(data)

  xml.onreadystatechange = function() {
    if(xml.readyState===4) {
      if(xml.status===200) {
        callback(xml.responseText)
      } else {
        console.log(xml.status, "Error")
      }
    }
  }
}

Answer 1

代码似乎不正确。也许在发布后进行手动编辑：查看for循环。有＆＃34;我＆＃34;在你使用的循环内声明和使用的变量＆＃34; index＆＃34;变量。我也看不到回调参数。我不确定这里有什么与关闭有关。在这段代码的帮助下你打算做什么？

Answer 2

实际上有一个异步错误保存到数据库服务器端 - 上面的代码有效。但是，在打开请求后，如果您希望能够将其识别为xhr，则必须设置标题。您必须设置的标题如下，但我将代码更新为我在上面的问题中使用的最终代码：

xml.setRequestHeader("X-Requested-With","XMLHttpRequest")

在异步发布请求中发送不同的FormData

更新

解决方案

2 个答案: