使用jquery进度条重定向到表单提交后的另一个页面


Redirect to another page after form submit using jquery progress bar

我有一个表单,它将文本和图像发送到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");
}
?>

但是,它不是在"页眉(位置….)"后面,而是在表单下面显示该页面的内容,而不是重定向。我不熟悉javascript或jquery,也搞不懂。

您需要使用javascript来执行重定向。因此将从服务器发回适当的url

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
}