仅使用jquery上传进度条百分比 - 不使用php

时间:2017-08-10 06:42:53

标签: jquery html

我一直在jquery上进行文件上传。我的要求是在上传文件后点击上传按钮。我想仅使用jquery以百分比显示进度条。不使用任何其他服务器端语言,如PHP。没有任何形式的动作PHP文件。只需在上传显示进度条时上传文件,但不包括服务器端操作。

由于 瑞木

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文件

$(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

});

0 个答案:

没有答案