0

我有一个代码，可以很好地使用 FormData 和 XMLHttpRequest 通过 ajax 发送多个文件；

            for (var i=0, j=this.files.length; i<j; i++) {
            file = this.files[i];

            var formdata = new FormData();          
                formdata.append("images[]", file);


            var xhr = new XMLHttpRequest(),
                upload = xhr.upload,
                id = Math.floor((Math.random() * 100000));

                upload.addEventListener("loadstart", function(e){
                        showUploadedItem(file, this.id);
                });
                upload.id = id;
                upload.onprogress = function(e) {
                    var done = e.position || e.loaded, total = e.totalSize || e.total;
                    )
                };
                upload.onload = function(e) {

                    if (this.status == 200) {
                      console.log('');
                    }                        
                };
                xhr.onreadystatechange = function(e) {
                    if ( 4 == this.readyState ) {
                        console.log('');
                    }
                };
                xhr.open('post', '<?php echo Yii::app()->createUrl('url') ?>', true);
                xhr.send(formdata);                    
        }

我将每个文件作为循环内的新 XMLHttpRequest 对象发送，所以我不知道什么时候所有请求都结束了。

任何人都可以帮忙吗？

4

2 回答 2

1

查看 XMLHttpRequest 的文档。

我能想到几个选项。您可以对它们中的每一个使用“loadend”回调，并在循环外增加一个变量，并检查每个请求中发送的请求总量。一旦计数达到请求总数，您就可以执行任何逻辑或调用想要调用的函数。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest%2FUsing_XMLHttpRequest

否则，将 async 参数设置为 false 也可以，但是在启动其他参数之前等待每个参数完成都会对性能造成影响。

于 2013-05-29T03:52:13.723 回答
0

根据您的回答，我的解决方案；

        var x = 0;
        var lenght = this.files.length;
        for (var i=0, j=lenght; i<j; i++) {

        // code here                   

            var xhr = new XMLHttpRequest(),

             // code here  

                xhr.onreadystatechange = function(e) {
                    if ( 4 == this.readyState && this.status == 200 ) {
                        x++;
                        if(x == lenght) {
                            window.setTimeout( function(){
                                alert('finish');
                             }, 1000 );
                        }
                    }
                };
             // code here
          }

虽然这是一个微不足道的功能，但它确实有效。

于 2013-05-29T12:12:52.117 回答