0

JavaScriptで複数の画像をアップロードしようとしています。1枚の写真をうまくアップロードできましたが、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ループ内でfiles[0]をfiles[i]に変更するのと同じくらい簡単だと思ったのですが、複数のファイルをアップロードすると、最初のファイルを取得してn回アップロードするだけです.nはファイルの量ですファイルフィールドで。

アップデート

関数 XMLHttpRequest.open に値 false の 3 番目のパラメーターを渡すことで、同期ポスト リクエストを使用して複数のファイル アップロードを取得できたので、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")
      }
    }
  }
}
4

2 に答える 2

0

実際には、データベース サーバー側に保存する非同期エラーが発生しました。上記のコードは機能します。ただし、リクエストを開いた後、xhr として認識できるようにする場合は、ヘッダーを設定する必要があります。設定する必要があるヘッダーは以下のとおりですが、上記の質問で作業している最終的なコードになるようにコードを更新しました。

xml.setRequestHeader("X-Requested-With","XMLHttpRequest")
于 2013-10-26T17:27:04.200 に答える