How to upload multiple files asynchronously using PHP, jQuery and AJAX

Difference Between Synchronous And Asynchronous

Synchronous: It run program one after another that means It waits for each program to complete, after that it executes the next program.
Asynchronous: It never waits for each program to complete, rather it executes all program one at time

Index.php

<form enctype="multipart/form-data" id="fileform">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="file">Select File's:</label>
                    <input type="file" class="form-control" id="multiupload" name="uploadFile[]" multiple >
                </div>
                <button type="button" id="upload" class="btn btn-primary">Start Upload</button>
            </div>
            <div class="col-sm-6" id="uploadsts">
            </div>
        </div>
    </form>

Script.js

function uploadajax(file_length,file_count)
    {
        var fileList = $('#multiupload').prop("files");
        var form_data =  "";
        form_data = new FormData();
        form_data.append("upload_image", fileList[file_count]);
        if(check_file(fileList[file_count].name))
        {
            var request = $.ajax({
                    url: "upload.php",
                    cache: false,
                    contentType: false,
                    processData: false,
                    async: true,
                    data: form_data,
                    type: 'POST', 
                    dataType:'json',
                    xhr: function() {  
                        var xhr = $.ajaxSettings.xhr();
                        if(xhr.upload){ 
                        xhr.upload.addEventListener('progress', function(event){
                            var percent = 0;
                            if (event.lengthComputable) {
                                percent = Math.ceil(event.loaded / event.total * 100);
                            }
                            $('#progressbar'+file_count).text(fileList[file_count].name+' '+percent+'%') ;
                            $('#progressbar'+file_count).attr('aria-valuenow',percent);
                            $('#progressbar'+file_count).css("width", percent+"%");
                        }, false);
                        }
                        return xhr;
                    },
                    success: function (res, status) {
                        if (status == 'success') {
                            percent = 0;
                            $('#progressbar'+file_count).removeClass("progress-bar-warning");
                            $('#progressbar'+file_count).addClass("progress-bar-success");
                            if (file_count < file_length) {
                                uploadajax(file_length, file_count + 1);
                            } 
                        }
                    },
                    error: function (res) {
                        
                        $('#progressbar'+file_count).removeClass("progress-bar-warning");
                        $('#progressbar'+file_count).addClass("progress-bar-danger");
                        alert('Failed');
                    }    
                })
        }
        else
        {
            $('#progressbar'+file_count).text(fileList[file_count].name+' 0% Only image and pdf are allowed') ;
            $('#progressbar'+file_count).attr('aria-valuenow',100);
            $('#progressbar'+file_count).css("width","100%");
            $('#progressbar'+file_count).removeClass("progress-bar-warning");
            $('#progressbar'+file_count).addClass("progress-bar-danger");
            if (file_count < file_length) {
                uploadajax(file_length, file_count + 1);
            }
        }
    }

    $('#upload').click(function(){
        var fileList = $('#multiupload').prop("files");
        $('#uploadsts').html('');
        var i;
        for ( i = 0; i < fileList.length; i++) {
           
                $('#uploadsts').append('<div class="progress"><div class="progress-bar progress-bar-warning" role="progressbar" id="progressbar'+i+'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">'+fileList[i].name+' </div></div>');
                if(i == fileList.length-1){
                    uploadajax(fileList.length-1,0);
                }
          
            
         }
    });

    function check_file(file) {
        var ext = file.split(".");
        ext = ext[ext.length-1].toLowerCase();      
        var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif","pdf"];
    
        if (arrayExtensions.lastIndexOf(ext) == -1) {
            return false;
        }
        else
        {
            return true;
        }
    };

addEventListener() : is an core function of JavaScript.It is used to listen javascript event,

upload.php

$ststus=move_uploaded_file($_FILES["upload_image"]["tmp_name"],'File/'.$_FILES["upload_image"]["name"]);
echo $ststus;
   

Add a Comment

Your email address will not be published. Required fields are marked *