如何在ajax上传表单上显示进度百分比?

时间:2016-02-05 06:54:12

标签: javascript php jquery ajax

我正在尝试使用我的ajax文件上传表单显示进度指示器。上传工作正常。我尝试使用各种来源整合进度指示器,但没有任何效果。这是我上传的ajax代码(没有进度指示器)。

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

以下是HTML部分:

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

我无法通过互联网收集的代码使用进度指示器。任何人都可以帮我处理工作代码吗?

0 个答案:

没有答案