Friday 11 December 2015

Ajax file upload Progress Bar

Ajax file upload 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',
   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