In this tutorial, we will explain to you that how can we display an uploaded image on a page in PHP before it is stored to the database.

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>How can we display an uploaded image on a page in PHP before it is stored to the database</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 class="container">
    <h2>How can we display an uploaded image on a page in PHP before it is stored to the database - XpertPhp</h2>
    <form action="/action_page.php">
        <div class="form-group">
            <label for="ProfilePhoto">Profile Photo</label>
            <input type="file" name="ProfilePhoto" id="ProfilePhoto" class="file-pos form-control" onchange="profileimg(this)" accept="image/*">
        </div>
        <div id="profilethumb"></div>
        <button type="submit" class="btn btn-default">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>