вот мой код, который позволяет мне нажимать на картинку и загружать картинку, она работает нормально, но только когда я загружаю картинку, она перенаправляет на другую страницу, которую я не хочу, я хочу остаться на той же странице.
Моя HTML-страница
<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… <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> Post Profile</button></div><!-- class="ui-btn-corner-right -->
</div>
</form>
<div data-role="footer">
<h4>©2016 • Genesis M&C Holdings Pty</h4>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#profile-image').on('click', function() {
$('#file').click();
});
});
</script>`
Вот мои CSS коды, которые позволяют кнопке появляться и исчезать при нажатии на картинку
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;
}
Задача ещё не решена.
Других решений пока нет …