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

时间:2015-03-05 00:19:49

标签: javascript php jquery forms

我有一个表单,可以将文本和图像发送到php文件,然后将其保存到数据库,然后重定向到成功页面或发布页面失败。
我按照解决方案found here但我不希望它向我显示成功/失败的消息。我希望它将我重定向到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");
}
?>

但不是遵循&#34;标题(位置....)&#34;它在表单下方显示该页面的内容,而不是重定向。我不熟悉javascript或jquery,无法弄清楚。

1 个答案:

答案 0 :(得分:2)

您需要使用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
}