1

I have been working on a file upload in jquery. My requirement is when I click on upload button after uploading file. I want to display a progress bar in percentage using only jquery. Without using any other server side language like PHP. with out any action php file in form. just upload the file while uploading show progress bar with percentage, no server side actions.

Thanks Ramu

HTML File

<form method="post" id="save_build_upload">

<div class="uploadFileBlock">
               <div class="uploadFile" >
                  <div class="upload-ipa" id="inputFileButton">
                     <i class="sprite ipa-icon "></i>
                     <span>Drag and drop the file or click to upload. </span>
                  </div>
                  <div class="outputIPA"></div>
               </div>
               <div class="uploadFile">
                  <div class="upload-apk">
                     <i class="sprite apk-icon "></i>
                     <span>Drag and drop the file or click to upload. </span>
                  </div>
                  <div class="outputAPK"></div>
               </div>
            </div>

<div id='output_image'></div>

<div id="uploadButtonDiv">              
      <button type="submit" class="btn" id="uploadBuildFile" onClick="uploadFile();">Upload</button>                  
</div>

</form>

javascript file

$(document).ready(function () {

$("#save_build_upload").submit(function(){

var form_data = new FormData();        
        jQuery.each(jQuery('#inputFile')[0].files, function(i, file) {
            form_data.append('file', file);
            console.log('adding file' + file)          

       });

       event.preventDefault();        

       $.ajax({
                url: '/v1/appManagement/upload/' + localStorage.getItem("userId") + '/',
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(data){
                    console.log('File Uploaded!')  
                    window.location.reload();                              
               }
        });

}); //End of submit

});
Ramu
  • 115
  • 2
  • 13

0 Answers0