使用jQuery进度栏提交表单后重定向到另一个页面

Question

我有一个将文本和图像发送到php文件的表单，该文件将其保存到数据库，然后将其重定向到成功页面或失败发布页面。
我遵循此处找到的解决方案，但我不希望它向我显示成功/失败的消息。 我希望它将我重定向到php文件中定义的页面。 这是表格的简短示例

<form action="insert.php" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadedfile"><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);
         },
         complete: function(xhr) {
           bar.width("100%");
           percent.html("100%");
           status.html(xhr.responseText);
         }
    }); 

    })();       
 </script>

而insert.php就是这样

<?php
$target_path = "uploads/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    header("Location: post_success.php");
} else{
    header("Location: post_fail.php");
}
?>

但是，它没有遵循“ header（location ....）”，而是在表单下方显示了该页面的内容，而不是重定向。 我对javascript或jquery不熟悉，无法弄清楚。

Answer 1

您将需要使用javascript进行重定向。 因此将从服务器发回适当的网址

PHP

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "post_success.php";
} else{
     echo "post_fail.php";
}

JS

complete: function(xhr) {
    bar.width("100%");
    percent.html("100%");
    window.location = xhr.responseText;//redirect to url returned from server
}