preview and upload image using php with mysql – onlinecode
In this post we will give you information about preview and upload image using php with mysql – onlinecode. Hear we will give you detail about preview and upload image using php with mysql – onlinecodeAnd how to use it also give you demo for it if it is necessary.
In this tutorial, we will explain to you that how can we preview and upload image using php with mysql.
Normally, When we are doing use to when uploading the product image or change the profile picture. so let’s know how to do display image without stored into the database.
Here, we have used to bootstrap for making a form in this below file and also use jquery.
When the user chooses the image then the function will be call and that function read the current image using FileReader() function. if any file will get then it will be displayed.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>preview and upload image using php with mysql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div >
<h2>preview and upload image using php with mysql</h2>
<form action="/action_page.php">
<div >
<label for="ProfilePhoto">Profile Photo</label>
<input type="file" name="ProfilePhoto" id="ProfilePhoto" onchange="profileimg(this)" accept="image/*">
</div>
<div id="profilethumb"></div>
<button type="submit" >Submit</button>
</form>
</div>
<script>
function profileimg(input1) {
$('.profielthumb').remove();
if (input1.files && input1.files[0]) {
$(input1.files).each(function () {
var reader = new FileReader();
reader.readAsDataURL(this);
reader.onload = function (e) {
$("#profilethumb").append("<img class='profielthumb' src='" + e.target.result + "' style='width: 150px; margin-bottom: 15px'>");
}
});
}
}
</script>
</body>
</html>Hope this code and post will helped you for implement preview and upload image using php with mysql – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs