how to queue file uploading in ajax jquery?

Question

<script>
funcupload(i) {
var formData = new FormData();
files = $("#upload").get(0).files;

formData.append("upfiles[]", files[i]);

$.ajax({
    url:"upload.php",
    type: 'post',
    data: formData,
    cache: false,
    processData: false,
    contentType: false,
    success:function(data) {
alert("Complete");
i++;
}
}
</script>

<input type=\"file\" id=\"upload\" name=\"upfiles[]\" multiple>
<input type=\"button\" value=\"Upload\" name=\"upload\" onclick=\"funcupload(0)\">

I want to queue for upload files. In my above code when first file is uploading, second file is pending status. But if upload button clicked again after select files then first file is starting to upload same time with first file added to the previous click of upload button.

How can queue ajax upload for files Or in other words how can added next files to current ajax?

Jordumus · Accepted Answer · 2015-04-08 12:40:54Z

2

What I think you want to do:

user select 4 files to upload.
User clicks button
you want to do an ajax-call for each file, but they can't overlap

If that's the case, then you can do this:

var filesToUpload = null;

var uploadNextFile(counter)
{
    $.ajax({
        url:"upload.php",
        type: 'post',
        data: files[i],
        cache: false,
        processData: false,
        contentType: false,
        success:function(data) {
            if (counter < filesToUpload.length)
               uploadNextFile(counter++);
            else
               filesToUpload = null;

        }
    }
}

Now, when the submit-button is clicked, you call uploadNextfile() and pass the files and counter 0.

If the user adds files, you can check if filesToUpload is empty or not. If it's not empty, you can add the files, and the code will continue running:

filesToUpload.push(/*extra files*/);

If it's empty, you can just call the function again.

edited Apr 8, 2015 at 12:40

answered Apr 8, 2015 at 12:31

Jordumus

2,7832 gold badges25 silver badges39 bronze badges

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

3 Comments

kelly Over a year ago

thanks. but if user selected another 4 files when pervious 4 files is uploading then new files overlap on pervious 4 files to upload!

Jordumus Over a year ago

@kelly I've changed my code to reflect your problem.

Daniel Wu Over a year ago

Disable the "choose files" button while these 4 files are still being uploaded.. Show progress bar in the mean time.

Collectives™ on Stack Overflow

how to queue file uploading in ajax jquery?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related