1

オブジェクト XMLHttpRequest を使用して、複数の写真を同時にアップロードしようとしています。

 if(files.length <= 6) {   

    for(var i = 0; i < files.length; i++)   {

      var formData = new FormData();
      formData.append('action', 'uploadPhoto');
      formData.append('photo_id', id);
      formData.append('file'+id, files[i]);
      UploadFile(formData, id);   } 

    }

 function UploadFile(formData, id)  {   

 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'uploadPhoto.php', false);   
 xhr.onload = function (){};   

xhr.send(formData); }

問題は、写真のアップロードが同じことを繰り返すことです。これはループが続いて写真のアップロードが終わらないからだと思います。

4

2 に答える 2

0

コメントからのように、あなたidは乱数であり、反復ごとにランダムである必要があります。ただし、for ループの外で設定したため、各ループで上書きされるため、アップロードされたファイルは 1 つしか表示されません。使用しているランダム関数によっては、同じ番号を再度生成する可能性があり、ここで行っているのと同じ方法でファイルがランダムに上書きされる可能性があります。

ここでは、代わりにタイムスタンプ手法を採用しました。これは、実行した時点で常に一意になります。これを試して ：

if(files.length <= 6) {   

for(var i = 0; i < files.length; i++)   {

  var id =Date().getTime();
  var formData = new FormData();
  formData.append('action', 'uploadPhoto');
  formData.append('photo_id', id);
  formData.append('file'+id, files[i]);
  UploadFile(formData, id);   } 

}
 function UploadFile(formData, id)  {   

 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'uploadPhoto.php', false);   
 xhr.onload = function (){};   

xhr.send(formData); }
于 2013-05-19T17:01:46.767 に答える
0

各ループ反復の最後ではなくuploadPhoto()、ループの外 (後) で呼び出します。forまた、FormData宣言をループ外に移動します。

また、元の「photo_id」パラメーターを変更してループ カウンターの値を含めたので、ファイルごとに異なる photo_id パラメーター キーを使用できます。

さらに、xhr.open への呼び出しの最後のパラメーターを「true」に変更しました。あなたのコードは同期 xhr 呼び出しを行っていました。これは通常、悪い考えです。最後のパラメーターを「false」に切り替えて、xhr 呼び出しを非同期にしました。

最後に、uploadPhotoとにかく使用しないため、関数の id パラメーターを削除しました。

また、アップロード機能の最初の文字を小文字に変更しました。コンストラクター関数の場合は、関数名を大文字で始める必要があります。これは広く受け入れられている規則です。コードは次のようになります。

if(files.length <= 6) {   
    var formData = new FormData();

    for(var i = 0; i < files.length; i++)   {
      var id = getUuid();

      formData.append('action', 'uploadPhoto');
      formData.append('photo_' + i + "_id", id);
      formData.append('file'+id, files[i]);
    } 

    uploadFile(formData);   
}

 function uploadFile(formData)  {   
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'uploadPhoto.php', true);   
    xhr.send(formData); 
}

function getUuid() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
      return v.toString(16);
   });
}

getUuid 関数はhttps://stackoverflow.com/a/2117523/486979から来ています。バージョン 4の UUID が生成されることに注意してください。

于 2013-05-19T18:19:15.907 に答える