沒有Ajax的jQuery進度條文件上傳器

Question

我正在寫一個文件上傳的web應用程序。它目前是一個PHP條件的3步形式。

我有上傳工作。但我想知道是否有辦法創建一個沒有AJAX用戶的進度條。我有一個進度條與jQuery和ajax完美配合，但是在文件上傳完成後，表單不會提交併移動到確認頁面並回顯結果和變量等。

難道真的沒有簡單跟蹤文件上傳百分比的方式與PHP和jQuery/JavaScript與AJAX的需要？瘋狂試圖找出解決這個問題的方法。

Answer 1

使用上傳文件

<script type="text/javascript" language="javascript" src="script/jquery-progress-form.js"></script> 
    <script> 
    $(document).ready(function() 
      { 
     $("#ajax_up").click(function(){ 
     var options = { 
       beforeSend: function() 
       { 
        $("#progress").show(); 
        $("#bar").width('0%'); 
        $("#message").html(""); 
        $("#percent").html("0%"); 
       }, 
       uploadProgress: function(event, position, total, percentComplete) 
       { 
        $("#bar").width(percentComplete+'%'); 
        $("#percent").html(percentComplete+'%'); 
       }, 
       success: function() 
       { 
        $("#bar").width('100%'); 
        $("#percent").html('100%'); 
       }, 
       complete: function(response) 
       { 
       $("#message").html("<font color='green'><div style='height:1000px;'>"+response.responseText+"</div></font>"); 
       }, 
       error: function() 
       { 
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>"); 
      } 
      }; 
     $("#myForm").ajaxForm(options); 

     }); 
      }); 
    </script> 
    <style> 
     #progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } 
     #bar { background-color: #B4F5B4; width:0%; height:10px; border-radius: 3px; padding-bottom:10px; } 
     #percent { position:absolute;top:3px; left:48%; } 
    </style> 


    <h2 style="font-family:Arial, Helvetica, sans-serif;">Upload Image</h2> 
     <form id="myForm" name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> 
     <input type="file" name="image" size="30" id="image" /> 
     <input type="submit" name="upload" value="Upload" class="buttoni2m_1" id="ajax_up" /><br /> 

     </form> <br /> 
    <div id="progress"> 
      <div id="bar"></div> 
      <div id="percent">0%</div > 
    </div> 
    <div id="message"></div><br />