0

I am trying to display progress indicator with my ajax file upload form. Upload is working fine. I tried to integrate progress indicator using various sources, but nothing worked. Here is my ajax code for upload (without progress indicator).

<script>
$(function () {

    $("#ajaxSubmit").click(function() {

        var fd = new FormData();
         var username = $("#username").val();
          var fileInput = $("#fileInput").val();
        fd.append("fileInput", $("#fileInput")[0].files[0]);
        fd.append("username", $("#username").val());

        if(fileInput == '')
         {
                alert("Please Select Files");
         }else{
        $.ajax({
            url: 'uploads.php',
            type: 'POST',
            cache: false,
            data: fd,
            processData: false,
            contentType: false,         
             complete: function(response) { 
                    output.html(response.responseText);
                    myform.resetForm(); 
                    submitbutton.removeAttr('disabled');               
                }      

        });
   }
    });
});
</script>

Here is the HTML part:

<form class="form-inline" method="post" action="" id="form" enctype="multipart/form-data" >
           <div class="uploded">
                <input type="hidden" value="<?php echo $_SESSION['username'];?>" name="username" id="username"/>
                <input type="file" name="fileInput" id="fileInput" class="form-control file golden"/>
            </div>

              <div class="clearme"></div>
             <div class="column-2">

              <input type="button" class="btn1" name="submit" id="ajaxSubmit" value="Start Upload"/></br>
              <a href="">Terms and Conditions.</a>

              <div class="links" id="output">
                 <h5>Uploaded Files</h5>            
               </div>

                 <div class="clearme"></div>
              <div id="progressbox">
                <div id="progressbar"></div >  
              </div>
           </div>
 </form>

I couldn't get the progress indicator work with codes collected over internet. Can anybody help me with a working code?

  • http://stackoverflow.com/questions/15328275/show-progressbar-while-loading-pages-using-jquery-ajax-in-single-page-website – Sabaz Feb 05 '16 at 07:13
  • fyi - there is an html tag `progress` for this sort of situation http://www.w3schools.com/tags/tag_progress.asp – Professor Abronsius Feb 05 '16 at 07:24

0 Answers0