Not redirecting after uploading images. JQuery / PHP

I have been trying to create a web app to upload multiple images. It is required that after successful upload the page be redirected to another page. The code does it's job and the images are uploaded successfully. But the header code in PHP responsible to redirect just doesn't seem to work. I searched and experimented a lot in both the PHP and JQuery, but nothing seems to work.

The PHP code performs the upload operation and redirection properly when the script is disabled. On enabling the script, the redirection doesn't work.

Here are the codes:

PHP Code:-


require_once 'dbconfig.php';

$max_size = 1024*200000;
$extensions = array('jpeg', 'jpg', 'png');
$dir = 'user_images/';
$count = 0;
$username = $_POST['user_name'];// user name
$userjob = $_POST['user_job'];// user email

if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files']))
  // loop all files
  foreach ( $_FILES['files']['name'] as $i => $name )
    // if file not uploaded then skip it
    if ( !is_uploaded_file($_FILES['files']['tmp_name'][$i]) )

      // skip large files
    if ( $_FILES['files']['size'][$i] >= $max_size )

    // skip unprotected files
    if( !in_array(pathinfo($name, PATHINFO_EXTENSION), $extensions) )

    // now we can move uploaded files
      if( move_uploaded_file($_FILES["files"]["tmp_name"][$i], $dir . $name) )

     // if no error occured, continue ....
        $userpic = $_FILES['files']['name'][$i];
        $imgExt = strtolower(pathinfo($imgFile,PATHINFO_EXTENSION)); // get image extension
        //$userpic = $imgFile.".".$imgExt;      
        //echo "<br>".$username;
        //echo "<br>".$userjob;
        //echo "<br>".$imgFile;
        //echo "<br>".$imgExt;
        //echo "<br>".$userpic;     

        $stmt = $DB_con->prepare('INSERT INTO tbl_users(userName,userProfession,userPic) VALUES(:uname, :ujob, :upic)');

            $successMSG = "new record succesfully inserted ...";            
            header("refresh:2;index.php"); // redirects image view page after 5 seconds.
            $errMSG = "error while inserting....";



In HTML File:

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

<!-- javascript dependencies -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.form.min.js"></script>

  <!-- main script -->
  <script type="text/javascript" src="js/script.js"></script>


$(function() {
  /* variables */
  var status = $('.status');
  var percent = $('.percent');
  var bar = $('.bar');

  /* submit form with ajax request using jQuery.form plugin */

    /* set data type json */

    /* reset before submitting */
    beforeSend: function() {

    /* progress bar call back*/
    uploadProgress: function(event, position, total, percentComplete) {
      var pVel = percentComplete + '%';            

    /* complete call back */
    complete: function(data) {      
      status.html(data.responseJSON.count + ' Files uploaded!').fadeIn();



I just want to redirect to another page, once the uploading is complete. Seems like the script is in some way preventing the header function in PHP code to do it's part. Any easy method that allows the script to run as well as redirect after successful upload would really help. Thanks.