图片上传图片，但按下提交按钮后重定向到另一页面

Question

here is my code that allows me to click on the picture and upload the picture,It works fine but only when i upload the picture it redirect to another page which i do not want,I want to stay on the same page.

My HTML Page

<div data-role="page" id="page4" data-add-back-btn="true">
    <div data-role="header">

        <h1>Profile</h1>
    </div>
    <div data-role="content">
    <?php
if(isset($_POST['submit'])){
header("Location: index.php#page4");    
move_uploaded_file($_FILES['file']['tmp_name'],"picture-upload/".$_FILES['file']['name']);  
$con=mysqli_connect("localhost","root","","recruitment");
$q=mysqli_query($con,"UPDATE users SET image='".$_FILES['file']['name']."'where username='".$_SESSION['username']."'");

}
?>
       <form action="index.php" method="post" enctype="multipart/form-data" data-ajax="false">
        <h5><span>
        <div id="box1">
        <input name="file" id="file" class="hidden" type="file" ><br>

        <button type="submit" class="btn btn-primary" name="submit" data-role="none">Upload picture</button>
         <?php

$con=mysqli_connect("localhost","root","","recruitment");
$q=mysqli_query($con,"SELECT * from users where username='".mysql_real_escape_string($_SESSION['username'])."'");
while($row=mysqli_fetch_assoc($q)){
    /*echo $row['username'].'<br>';*/
if($row['image']==""){
    echo'<img id="profile-image" width="50" height="50" src="picture-upload/defaultimage.png" alt="Default profile picture">';
}
    else{
    echo'<img id="profile-image" width="50" height="50" src="picture-upload/'.$row['image'].'" alt="Profile picture">';


}
}

?>

        </div>

        </br></span>

        <?php   echo 'Welcome '.$_SESSION['username'];

        echo "<br><a href='logout.php' data-ajax='false'>Logout</a>"; ?> ...</h5></form>  
      <p></p><p></p><p></p>
       <span id="result"></span>
      <form style="border:dotted 1px #CCC" id="profileform" action="profile.php" method="post" enctype="multipart/form-data" data-ajax="false">




      <div class="form-group">
         <label class="control-label" for="yourEmail">Full Name</label>
         <div class="input-group">
         <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
         <input type="text" name="yourFname" data-role="none" placeholder="Your Full Name..." class="form-password       form-control" id="yourFname" required>
         </div></div>
  <div class="form-group">
         <label class="control-label" for="yourEmail">Country</label>
         <div class="input-group">
         <span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span>
        <select id="country" name="country" class="btn btn-default form-control" data-role="none">       
         <option value="" >Select a country</option>
         <option value="South Africa" >South Africa</option>
          <option value="Namibia">Namibia</option>
          <option value="India">India</option>
          <option value="Congo">Congo</option>
           </select> 
           </div></div>
         <div class="form-group">
         <label class="control-label" for="yourEmail">City</label>
         <div class="input-group">
         <span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span>
         <input type="text" name="yourCity" data-role="none" placeholder="Your City..." class="form-password  form-control" id="yourCity" required>
         </div></div>
 <div class="form-group">
         <label class="control-label" for="yourEmail">Phone Number</label>
         <div class="input-group">
         <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
         <input type="tel" name="yourPhone" data-role="none" placeholder="Your Phone Number..." class="form-password  form-control" id="yourPhone" required>
         </div></div>

      <div class="form-group">
            <label class="control-label" for="yourEmail">Upload The CV</label>
            <div class="input-group ">
            <span class="input-group-addon "><span class="glyphicon glyphicon-upload "></span></span>
            <span class="file-input btn btn-block btn-default btn-file">
                Browse&hellip; <input type="file" name="upload" id="upload">
            </span>
        </div></div>

         <div class="col-lg-10 text-center" id="updateprofile"><a href="#page7">Update Profile</a></div><br/>

<div class="col-lg-10 text-center">
<button type="submit" class="btn btn-success" id="regbtn" name="regbtn" data-role="none"><span
class="glyphicon glyphicon-envelope"></span>&nbsp;Post Profile</button>


</div><!-- class="ui-btn-corner-right -->
    </div>
    </form>

    <div data-role="footer">
        <h4>&copy;2016 &bull; Genesis M&C Holdings Pty</h4>
    </div>
</div>
<script type="text/javascript">
$(function() {
    $('#profile-image').on('click', function() {
        $('#file').click();
    });
});
</script>`

Here is my CSS codes that allows the button to appear and disappear when you click on the picture

input.hidden {
    position: absolute;
    left: -9999px;
}


div#box1 >img{position:absolute; z-index:2000; width:50px; max-height:50px; border-radius:60px; }
div#box1{width:50px; height:50px; border-radius:60px;margin:0px 0px 3px 0px;padding:0px;float: none; }
div#box1 >button{
    display:none;
    position:absolute;
    margin:15px 0px 0px 40px;
    z-index:4000;
    background:#09C;
    border:#81a332 1px solid;
    padding:5px;
    font-size:12px;
    text-decoration:none; 
}
div#box1:hover button{
display:block;  
}