Question

我有一个适用于通过带有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对象发送到循环中，所以我不知道我什么时候收到所有请求。

有人可以帮忙吗？

Answer 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也会起作用，但是在启动其他参数之前，您会等待每个参数完成性能命中。

Answer 2

根据你的答案，我的解决方案;

        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
          }

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

如何知道循环中是否完成了所有上传？

2 个答案: