jQuery없이 아약스 진행률 표시 줄 파일 업 로더

Question

나는 파일 업로드 웹 애플 리케이션을 쓰고 있어요. 현재 PHP 조건부를 가진 3 단계 형식입니다.

업 로더가 작동합니다. 하지만 AJAX 사용자없이 진행률 표시 줄을 만드는 방법이 있는지 궁금합니다. jQuery 및 아약스와 완벽하게 작동하는 진행 표시 줄이 있지만 파일 업로드가 완료된 후 양식이 제출되지 않고 확인 페이지로 이동하여 결과와 변수 등을 반향 출력합니다.

정말 쉽지 않은가? 방법은 아약스에 대한 필요성과 PHP와 jquery/javascript로 파일 업로드 비율을 추적 ?? 이 문제를 해결하기 위해 미친 듯이 노력하고 있습니다.

Answer 1

을 사용하여 파일을 우리가 전체 링크를 제공하지 않고 JQuery와 진행-form.js 링크를 얻을 수있는 방법

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