1

プログレスバーも表示しながら、ブラウザからサーバーに複数のファイルをアップロードするコードをいくつか実行しました。XHR2 送信呼び出しは非同期です。問題は、すべての XHR2 送信呼び出しが終了した後で、いくつかの関数を呼び出したいことです。

これは私のコードの非常に単純化されたスニペットです:

<input id="upload" multiple="multiple" />

<script>
var files = document.getElementById("upload").files;
for (var i = 0, length = files.length; i < length; i++) {
   var file = files[i];
   var uploadFunc = function (arg) {
      return function () {
         processXHR(arg);
      };
   }(file);      
   uploadFunc();
}

function processXHR(file) {
   var normalizedFileName = getNormalizedName(file.name);
   var url = 'upload_file/';
   var formData = new FormData();
   formData.append("docfile", file);
   var xhr = new XMLHttpRequest();
   var eventSource = xhr.upload;
   eventSource.addEventListener("progress", function (evt) {
      var position = evt.position || evt.loaded;
      var total = evt.totalSize || evt.total;
      console.log('progress_' + normalizedFileName);
      console.log(total + ":" + position);
      $('#progress_' + normalizedFileName).css('width', (position * 100 / total).toString() + '%');
   }, false);
   eventSource.addEventListener("loadstart", function (evt) {
      console.log('loadstart');
   }, false);
   eventSource.addEventListener("abort", function (evt) {
      console.log('abort');
   }, false);
   eventSource.addEventListener("error", function (evt) {
      console.log('error');
   }, false);
   eventSource.addEventListener("timeout", function (evt) {
      console.log('timeout');
   }, false);
   xhr.onreadystatechange = function (evt) {
      if (xhr.readyState == 4) {
         console.log('onreadystatechange: File uploaded.');
      }
   };
    xhr.open('post', url, true);
    xhr.send(formData);
}
</script>

「onreadystatechange: ファイルがアップロードされました。」コンソールに出力され、ファイルの 1 つがアップロードされていることがわかります。しかし、「すべてのファイルがアップロードされました」というコードを書くことができません。

助けてくれてありがとう。 jqueryを使用したソリューションがある場合に備えて、jqueryも使用しています。

4

2 に答える 2

0

何回電話しているか知っていますか？もしそうなら、少なくとも ajax コールバック、カウントをチェックします。何かのようなもの

if (ajaxCallCount === ajaxCallsLength) {
 // Do stuff involving post all ajax calls
} else {
 ajaxCallCount++;
}
于 2012-06-30T03:40:52.023 に答える
0

あなたの場合、カウンターと setInterval メソッドが必要になります。これを試してください：

<input id="upload" multiple="multiple" />

<script>
var files = document.getElementById("upload").files;
var counter = 0;

for (var i = 0, length = files.length; i < length; i++) {
   var file = files[i];
   var uploadFunc = function (arg) {
      return function () {
         processXHR(arg);
      };
   }(file);      
   uploadFunc();
}

var interval = setInterval(function() {
    if(counter == files.length) {
        clearInterval(interval);
        console.log("All Files uploaded!");
    }
}, 100);

function processXHR(file) {
   var normalizedFileName = getNormalizedName(file.name);
   var url = 'upload_file/';
   var formData = new FormData();
   formData.append("docfile", file);
   var xhr = new XMLHttpRequest();
   var eventSource = xhr.upload;
   eventSource.addEventListener("progress", function (evt) {
      var position = evt.position || evt.loaded;
      var total = evt.totalSize || evt.total;
      console.log('progress_' + normalizedFileName);
      console.log(total + ":" + position);
      $('#progress_' + normalizedFileName).css('width', (position * 100 / total).toString() + '%');
   }, false);
   eventSource.addEventListener("loadstart", function (evt) {
      console.log('loadstart');
   }, false);
   eventSource.addEventListener("abort", function (evt) {
      console.log('abort');
   }, false);
   eventSource.addEventListener("error", function (evt) {
      console.log('error');
   }, false);
   eventSource.addEventListener("timeout", function (evt) {
      console.log('timeout');
   }, false);
   xhr.onreadystatechange = function (evt) {
      if (xhr.readyState == 4) {
         counter += 1;
      }
   };
    xhr.open('post', url, true);
    xhr.send(formData);
}
</script>
于 2012-06-30T04:10:32.040 に答える