PHP - Show image before inserting to database

Question

i want to show the image before inserting it to database after selecting an image from file, i want the image to show in the page. Can someone help me? im new to php and html and starting learn it. And if u know what will do can u explain it to me.

here is my php code.

<?php
session_start();

if(isset($_SESSION['username'])){
    include_once('connection.php');
    $username = ucfirst($_SESSION['username']);
    if(isset($_POST['submit'])){
        $title = $_POST['title'];
        $date = $_POST['date'];
        $content = $_POST['content'];
        $file=$_FILES['image']['tmp_name'];
        $image= addslashes(file_get_contents($_FILES['image']['tmp_name']));
        $image_name= addslashes($_FILES['image']['name']);
        move_uploaded_file($_FILES["image"]["tmp_name"],"img/" . $_FILES["image"]["name"]);
        $newsimage="img/" . $_FILES["image"]["name"];

        if(empty($title)){
            echo "Please enter a title";
        }
        else if(empty($date)){
            echo "Please enter a date";
        }
        else if(empty($content)){
            echo "Please enter content";
        }
        else{
        $sql ="INSERT into news (news_title, news_date, news_content, news_image) VALUES ('$title', '$date', '$content', '$newsimage')";
        mysqli_query($con, $sql);
        echo "news entry posted";
        }
    }
}
else{
    header('Location: login.php');
    die();
}

if(isset($_POST['image'])){




}

?>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <h1>Welcome, <?php echo $_SESSION['username']; ?>!</h1>

    <form method="post" action ="admin.php" enctype="multipart/form-data">
        Title<input type ="text" name ="title" /><br>
        Date<input type ="text" name="date" /><br>
        Content<textarea name="content"></textarea>
        <input type="submit" name="submit" value="Post News Entry" />
        <input class="form-control" id="image" name="image" type="file" onchange='AlertFilesize();'/>
    </form>

</body>
</html>

@nethken what are you inserting in the DB a BLOB or just the url and store the img in a folder — PacMan, Jun 28 '16 at 03:05
@PacMan 5 it's not a blob. my data type for my image is "text" and the data stored is like "img/imagename" the img is my image directory. I just watch a tutorial — nethken, Jun 28 '16 at 03:12

score 1 · Accepted Answer · edited May 23 '17 at 11:58

Try this, implementing on your code just like this :

   <form method="post" action ="admin.php" enctype="multipart/form-data">
        Title<input type ="text" name ="title" /><br>
        Date<input type ="text" name="date" /><br>
        Content<textarea name="content"></textarea>

        <input class="form-control" id="image" name="image" type="file" onchange='AlertFilesize();'/>
        <img id="blah" src="#" alt="your image" />
<input type="submit" name="submit" value="Post News Entry" />
    </form>

Then add JS

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#image").change(function(){
    readURL(this);
});

first, try remove `onchange='AlertFilesize();'` and then test it again. what is the return value of `AlertFilesize()` function ?, a boolean ? — arisalsaila, Jun 28 '16 at 03:43
It already worked i forgot to put a jquery my god HAHAHA. sorry sir. — nethken, Jun 28 '16 at 04:41

PacMan · Answer 2 · 2016-06-28T03:48:51.007

well since you are uploading images to folder which is very performant i tried to made as quite simple for you by editing you code here is it

HTML

<form method="post" action ="admin.php" enctype="multipart/form-data">
        Title<input type ="text" name ="title" /><br>
        Date<input type ="text" name="date" /><br>
        Content<textarea name="content"></textarea>
        <input type="submit" name="submit" value="Post News Entry" />
        <input class="form-control" id="image" name="image" type="file" />
        <input type='hidden' id='picName' name='picName' value=''>//this input is to get the pictures name in client side later you will know why
 </form>
<div id="tmp_upload"></div>//in this div we will show the uploaded image i will let you made some css for it width,height,stuff... by default it will have a display none since nothing is uploaded

here is the PHP code

if(isset($_SESSION['username'])){
    include_once('connection.php');
    $username = ucfirst($_SESSION['username']);
    if(isset($_POST['submit'])){
        $title = $_POST['title'];
        $date = $_POST['date'];
        $content = $_POST['content'];
        $picName = $_POST['picName'];
        if(empty($title)){
            echo "Please enter a title";
        }
        else if(empty($date)){
            echo "Please enter a date";
        }
        else if(empty($content)){
            echo "Please enter content";
        }
        else{
        $sql ="INSERT into news (news_title, news_date, news_content, news_image) VALUES ('$title', '$date', '$content', '$picName')";
        mysqli_query($con, $sql);
        echo "news entry posted";
        }
    }
}
elseif(isset($_FILES['image'])){
    if(move_uploaded_file($_FILES['image']['tmp_name'],"img/" . {$_FILES["image"]["name"]}) == TRUE){
    echo $_FILES['image']['name'].' was uploades succesfully<br/>';
}else{
     echo $_FILES['image']['name'].' could not be uploaded<br/>';
}
}
else{
    header('Location: login.php');
    die();
}

and finally the JS function would be like this

i'm supposed to use some Jquery code to made it much easier and it is not something hard for you

$(function(){
    $('input#image').change(function(){
        //collect uploaded file info
        var fname = this.files[0].name;
        //start process of uploading
        $('div#upload_tmp').show();
        uploadMe();//the function responsible on upload
        $("input#picName").val(fname);
    });
});
/*implementing function of uploadMe()*/
function uploadMe(){
    //create the myform object
    myForm = new FormData();
    myForm.append('image',document.querySelector('#image').files[0]);
    //generate the xmlHttpRequest 
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            //if(xhr.responseText === '1'){
                var img_name = document.querySelector('#image').files[0].name;
                var img = "<img src = 'img/"+img_name+"' width='160px' height='160px'>";
                $('div#upload_tmp').html(img);
            //}
        }
    };
    xhr.open('POST' , '//here you put the name of the php script who will manage the upload');
    xhr.send(myForm);
}

hope it may help a little bit & i'm still here for any question !!

PHP - Show image before inserting to database

2 Answers2