preview and upload image using php with mysql

August 29, 2019 XpertPhp Comments 0 Comment

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 class="container">
    <h2>preview and upload image using php with mysql</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>

<!DOCTYPE html>

<head>

<title>preview and upload image using php with mysql</title>

</head>

<body>

<h2>preview and upload image using php with mysql</h2>

<label for="ProfilePhoto">Profile Photo</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

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>

Please follow and like us:

Related posts: