重定向後提交已經使用jQuery

林爲形式的進度條上的工作完成了...你可以在這裏看到一個例子： http://www.enteratenorte.org/app-example/exa/重定向後提交已經使用jQuery

這是我到目前爲止有：

該CSS是：

<style> 
body { padding: 30px } 
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } 
.progress { position:relative; width:652px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } 
.bar { width:0%; height:40px; border-radius: 3px; background-image:url('loader.gif')} 
.percent { line-height:35px; color:#fff; position:absolute; display:inline-block; top:3px; left:48%; font-family:Verdana, Geneva, sans-serif; font-weight:bold; text-shadow: 2px 0 0 #009303, -2px 0 0 #009303, 0 2px 0 #009303, 0 -2px 0 #009303, 1px 1px #009303, -1px -1px 0 #009303, 1px -1px 0 #009303, -1px 1px 0 #009303; } 
</style>

的HTML代碼是：

<h1>File Upload Progress Demo #1</h1> 
     <form action="zip-upload.php" method="post" enctype="multipart/form-data"> 
     <input type="file" name="file" id="file" accept="image/jpg, image/jpeg" /><br> 
     <input type="submit" value="Upload File to Server"> 
    </form> 

    <div class="progress"> 
     <div class="bar"></div > 
     <div class="percent">0%</div > 
    </div> 

    <div id="status"></div>

的腳本是這樣的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script> 
    (function() { 

    var bar = $('.bar'); 
    var percent = $('.percent'); 
    var status = $('#status'); 

    $('form').ajaxForm({ 
     beforeSend: function() { 
      status.empty(); 
      var percentVal = '0%'; 
      bar.width(percentVal) 
      percent.html(percentVal); 
     }, 
     uploadProgress: function(event, position, total, percentComplete) { 
      var percentVal = percentComplete + '%'; 
      bar.width(percentVal) 
      percent.html(percentVal); 
     }, 
     success: function() { 
      var percentVal = '100%'; 
      bar.width(percentVal) 
      percent.html(percentVal); 
     }, 
     complete: function(xhr) { 
      status.html(xhr.responseText); 
     } 
    }); 

    })();  
    </script>

和PHP在接收機文件是：

if ((($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/pjpeg")) && ($_FILES["file"]["size"] < 20000000)) { 
    if ($_FILES["file"]["error"] > 0) { 
    echo "There was an error uploading the file, please try again!"; 
    } else { 
    move_uploaded_file($_FILES["file"]["tmp_name"],"temp/". $_FILES["file"]["name"]); 
     chmod("temp/". $_FILES["file"]["name"], 0777); 
     rename("temp/". $_FILES["file"]["name"], "temp/mynewfile.jpg"); 
     echo "Image successfully uploaded";  
    } 
    } 
else 
    { 
    echo "File doesn't match the requiere criteria"; 
    }

一切都可以正常使用。問題是，如果完成上傳，它只會顯示「成功上傳圖片」的隊列，但我想將表格重定向到不同的頁面，該如何完成？令人驚訝的是（我正在諷刺）它在IE中不起作用，它會上傳，但進度條不會移動，直到文件完全上傳它確實顯示「圖像成功上傳」

有人可以幫我用重定向選項，如果沒有太多的濫用協助，也看看什麼IE。：d

來源

2014-01-25 EnterateNorte

一直這個問題得到回答讓您滿意？如果沒有，請發佈有關您需要的附加信息。否則，請通過以下任一方式來關閉該問題：選擇一個正確答案，或者編寫自己的解決方案，並將其選擇爲正確答案 – gibberish

對於重定向，你可以使用header：

header('Location:<URL>');

但是，你需要刪除的形象成功地加載「回聲，頭也不會工作，如果有任何東西之前，一直輸出。

來源

2014-01-25 22:06:05 ElendilTheTall

我試過了，它沒有工作:( – EnterateNorte

希望我正確地理解你的問題，我回答正確的問題......我的頭頂部，至少有三種方式來重定向：

PHP：

header("Location: pagename.php");

HTML：

<meta HTTP-EQUIV="REFRESH" content="5; url=pagename.php">

PHP的標題（）方法是優選的，但如果其它標題（或HTML）以前輸出給頁面將不工作。作爲解決方法，您可以使用此方法重定向頁面，並且獎勵是在執行此操作之前它會等待指定的秒數（在這種情況下爲5，或者如果您選擇，則爲零）。

JS：

window.location.href = 'http://example.com'; // or just 'pagename.php';

來源

2014-01-25 22:08:21 gibberish

元刷新將用於HTML文件，但存在沒有辦法知道上傳需要多少時間，所以它不是我所需要的... – EnterateNorte

JS可以在'complete：function（xhr）{status.html（xhr.responseText）; } '區域，但responseText可能是文件沒有正確上傳，所以根據響應有沒有重定向的方法？ – EnterateNorte

是的，首先，你需要捕獲/預測響應，你應該能夠做到使用'console.log（xhr.responseText）'幾次，甚至'alert（）'，然後使用if語句，是的？如果這不起作用，請解釋。 – gibberish

重定向後提交已經使用jQuery

回答

相關問題