Tuesday 1 December 2015

Ajax file upload with progress Bar

$("form#imageuploadform").on("submit", function (e) {

    var formData = new FormData($(this)[0]);    
    var timestamp = $("form#imageuploadform input#timestamp").val();
    $.ajax({
        url: shr_ajax.ajaxurl,        
        type: 'POST',        
        enctype: 'multipart/form-data',        
        data: formData,
        dataType: "json",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', progress, false);
            }
                return myXhr;
        },
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {

            if (data.id == timestamp && data.success === true) {
                alert(data.message);
                $("#import_user_csv").removeAttr("disabled");
                $("#import_user_data_form").css("opacity", "1"); 
           }
            if (data.id == timestamp && data.success === false) {
                alert(data.message);
            }
            $('form#imageuploadform')[0].reset();
        }, 
       error: function (data) {
            console.log(data);
            $('form#imageuploadform')[0].reset();
        }
    });
    e.preventDefault();
});

function progress(e) {

    if (e.lengthComputable) {
        var max = e.total;        var current = e.loaded;
        var Percentage = (current * 100) / max;
        var percent_upload = Math.round(Percentage);
        console.log(percent_upload);
        jQuery("#percent_upload").css("width", percent_upload + "%");
        jQuery("#percent_upload").text(percent_upload + "%");
        if (Percentage >= 100) {
            //alert("Uploading finish.");
        }
    }

}

No comments:

Post a Comment