0

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.

JimmyBanks
  • 4,178
  • 8
  • 45
  • 72
  • 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 Oct 22 '12 at 01:04
  • probably a scope issue. see if this can help you: http://stackoverflow.com/questions/12552803/looping-through-array-with-callback and http://stackoverflow.com/a/1562293/982924 – RASG Oct 22 '12 at 01:13

2 Answers2

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(){ … });
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • 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 Oct 22 '12 at 01:28
-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.

Reflective
  • 3,854
  • 1
  • 13
  • 25