使用jQuery完成提交后重定向

Question

Im working on a progress status bar for a form... you can see a an example here: http://www.enteratenorte.org/app-example/exa/

This is what I have so far:

The css is:

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

The HTML code is:

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

The Script goes like this:

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

and the PHP in the Receiver file is:

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";
  }

Everything is working perfectly. The problem is, when if finishes uploading, it only displays que "Image successfully uploaded", but I would like to redirect the form to a different page, how can this be done?

Also, progress bar works with Safari, Firefox and Chrome... surprisingly (I'm being sarcastic) it doesn't work in IE, it uploads but progress bar doesn't move until the file has been completely uploaded and it does displays the "Image successfully uploaded"

Can some one help me with the redirect option, if not too much abuse of assistance , also see what IE. :D

Answer 1

Hopefully I understand your question correctly and am answering the right question... Off the top of my head, there are at least three ways to redirect:

PHP:

header("Location: pagename.php");

HTML:

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

The PHP header() method is preferred, but will not work if other headers (or html) were previously output to page. As a work-around, you can use this method to redirect the page, and the bonus is that it will wait the specified number of seconds before doing so (5 in this case, or zero if you choose).

JS:

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

Answer 2

For the redirect, you can just use header :

header('Location:<URL>');

But you need to remove the 'image sucessfully loaded' echo, header won't work if anything has been output before it.