JavaScript for loop prevent continuing until upload complete

Question

To upload multiple files, I am using JavaScript to loop through the files. To upload the files I am using the jQuery form plugin http://archive.plugins.jquery.com/project/form

Now, when the loop runs through, it runs to the end of the loop instantly, and uploads all files in one go.

Is there a way to get the loop to hold off during each upload?

This is an example of the loop im using (the actual code is quite large)

for(i=0;i<=num;i++)
{
    if(go1){
        <?php //if 1 upload only, hide add and upload button ?>
        $('#ad,#ok').hide();
        var z=i;
        $('#up'+i).ajaxSubmit({
            dataType:"json",
            beforeSubmit:function(before){
                $('#loadingsignup').show;
                $("#resultsignup").empty().hide();
            },
            success:function(retour){
                res=retour;
                if(num<1){  <?php // only one upload, redirect if uploaded correct, reintroduce upload button if error ?>
                    if(res.ok=="ok"){
                        window.location.replace('<?php echo $config['baseurl']; ?>/player/'+res.aid);
                    }else{
                        $('#rs'+z).append('<div class="pasgood">'+res.err+'</div>').show();
                        $('#ad,#ok').show();
                    }
                }
            }
        }); 

    }
}

I really need the loop to move through the uploads one at a time.

could use setTimeout to delay each upload sequence but delay is anyone's guess as there will be no progress feedback to gauge. Likely have better luck with an swf uploader — charlietfl
– charlietfl, Commented Oct 22, 2012 at 1:04
probably a scope issue. see if this can help you: stackoverflow.com/questions/12552803/… and stackoverflow.com/a/1562293/982924 — yodog
– yodog, Commented Oct 22, 2012 at 1:13

Bergi · Accepted Answer · 2012-10-22 01:17:05Z

2

No, the loop is synchronous while the upload is asynchronous. If you want the uploads to happen one after the other, you will need to fire the second one from the success callback of the first one etc.

function upload(i, suc, err) {
    if (i > num)
        return suc();
    $('#up'+i).ajaxSubmit({
        dataType:"json",
        beforeSubmit:function(before){
            $('#loadingsignup').show();
            $("#resultsignup").empty().hide();
        },
        success:function(res){
            if(res.ok=="ok"){
                $('#ad,#ok').show();
                upload(i+1, suc, err); // next one
            } else {
                $('#rs'+i).append('<div class="pasgood">'+res.err+'</div>').show();
                err(res.err); // or continue with the rest?
            }
        },
        error: err
    });
}
upload(0, function allDone(){
    window.location.replace('<?php echo $config['baseurl']; ?>/player/');
}, function somethingWrong(){ … });

answered Oct 22, 2012 at 1:17

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reflective Over a year ago

Just wanted to add this kind of implementetion because just understood that async: false is not supported anymore in ver 1.8 ... that's the way it should work with ver 1.8. Just may be it should go to the next upload even previous one has failed - should be added an upload(i+1, suc, err); to the error handler too I think.

Reflective · Accepted Answer · 2012-10-22 01:04:21Z

-1

Use async: false as $.ajax() param. This will avoid sending files at once, $.ajax will wait until execution of the request complete, thean the cycle will continue to the next item.

DOCS: By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the complete/success/error callbacks.

But anyway you need an syncronious execution.

answered Oct 22, 2012 at 1:04

Reflective

3,9371 gold badge17 silver badges25 bronze badges

4 Comments

JimmyBanks Over a year ago

could you elaborate a little more on what you mean?

charlietfl Over a year ago

async: false is deprecated in jQuery ajax

Reflective Over a year ago

that's true, but anyway the answer shows the way ... the request should be synchronious for one by one execution.

Reflective Over a year ago

in 1.8 should be handled in success and error callbacks i.e. to execute next upload when previous finishes with error or success

Collectives™ on Stack Overflow

JavaScript for loop prevent continuing until upload complete

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related