upload image from submit form to mysql database and display image in div?

Question

I am very new to PHP and need to figure this out for a project - I've made an image submit form in HTML that changes the img within a div to the image that selected using the form. Here is how I accomplish this:

echo '';
echo '';
echo ''; //stores image from php file
echo '';
echo 'Edit Profile';
echo '';
echo '';

and

$(document).ready(function() {


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

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

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


    $(".file-upload").on('change', function(){
        readURL(this);
    });

    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});

I need to upload this image to a column I have created for medium BLOBs in a MySql data base for each individual user. I've tried a number of different methods (tried $sql = new mysql, etc) but have no idea what I'm doing.

I'm now following this tutorial - http://www.sevenkb.com/php/how-to-insert-upload-image-into-mysql-database-using-php-and-how-to-display-an-image-in-php-from-mysql-database/ and have written the following that is supposed to upload an image to the database:

if(!isset($_FILES['upload_image']))
 {
 echo 'Please Select Image to Upload';
 }
else
 {
 try {
 upload();

 echo 'Image Uploaded into MySQL Database as LONGBLOB Using PHP ';
 }
 catch(Exception $e)
 {
 echo ''.$e->getMessage().'';
 }
 }

function upload(){
/*** check if a file was uploaded ***/
echo 'you uploaded';

if(is_uploaded_file($_FILES['upload_image']['tmp_name']) && getimagesize($_FILES['upload_image']['tmp_name']) != false)
 {
 /*** get the image info. ***/
 $size = getimagesize($_FILES['upload_image']['tmp_name']);
 /*** assign our variables ***/
 $type = $size['mime'];
 $imgfp = fopen($_FILES['upload_image']['tmp_name'], 'rb');
 $size = $size[3];
 $name = $_FILES['upload_image']['name'];
 $maxsize = 99999999;


 /*** check the file is less than the maximum file size ***/
 if($_FILES['upload_image']['size'] < $maxsize )
 {
 /*** connect to db ***/
 $dbh = new PDO("mysql:host=localhost;dbname=sqlserver", 'username', 'password');

 /*** set the error mode ***/
 $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

 /*** our sql query ***/
 $stmt = $dbh->prepare("INSERT INTO img (image_type ,image, image_size, image_name) VALUES (? ,?, ?, ?)");

 /*** bind the params ***/
 $stmt->bindParam(1, $type);
 $stmt->bindParam(2, $imgfp, PDO::PARAM_LOB);
 $stmt->bindParam(3, $size);
 $stmt->bindParam(4, $name);

 /*** execute the query ***/
 $stmt->execute();
 }
 else
 {
 /*** throw an exception is image is not of type ***/
 throw new Exception("File Size Error");
 }
 }
else
 {
 // if the file is not less than the maximum allowed, print an error
 throw new Exception("Unsupported Image Format!");
 }
}

But the image isn't uploading and does not appear in the new column I made in the database. The only thing displayed on the page is "Please Select Image to Upload"

What's wrong here? Ultimately I need to echo this in a div.. What should I do with this?

When trying to run example:

Errors when entering in my table name:

When going to phpadmin:

Amit Ray · Accepted Answer

I have used the code from this link "http://www.formget.com/ajax-image-upload-php/" to get what you needed. This code apart from saving the file into a folder will save it into a database. I have made a folder images to store image files and two php files one which shows frontend html form with javascript code and the other for upload and display. The HTML code "index.php" is this



Ajax Image Upload







Select Your Image







loading..

For the upload script and display after upload (upload.php) you can use

 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "

";
}
else
{
if (file_exists("images/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " already exists. ";
}
else
{
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "images/".$_FILES['file']['name']; // Target path where file is to be stored

 $size = getimagesize($_FILES['file']['tmp_name']);
 /*** assign our variables ***/
 $type = $size['mime'];
 $imgfp = fopen($_FILES['file']['tmp_name'], 'rb');
 $size = $size[3];
 $name = $_FILES['file']['name'];



 /*** check the file is less than the maximum file size ***/
 if($_FILES['file']['size'] < $maxsize )
 {
 /*** connect to db ***/
 $dbh = new PDO("mysql:host=localhost;dbname=DM_NAME", 'DB_USER', 'DB_PASSWORD');

 /*** set the error mode ***/
 $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

 /*** our sql query ***/
 $stmt = $dbh->prepare("INSERT INTO imageblob (image_type ,image, image_size, image_name) VALUES (? ,?, ?, ?)");

 /*** bind the params ***/
 $stmt->bindParam(1, $type);
 $stmt->bindParam(2, $imgfp, PDO::PARAM_LOB);
 $stmt->bindParam(3, $size);
 $stmt->bindParam(4, $name);

 /*** execute the query ***/
 $stmt->execute();
 $lastid = $dbh->lastInsertId(); 
 //Move uploaded File
 move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
 if(isset($lastid))
 {
 /*** assign the image id ***/
 $image_id = $lastid;
	 try {
	 /*** connect to the database ***/
	 /*** set the PDO error mode to exception ***/
	 $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	
	 /*** The sql statement ***/
	 $sql = "SELECT image, image_type FROM imageblob WHERE image_id=$image_id";
	
	 /*** prepare the sql ***/
	 $stmt = $dbh->prepare($sql);
	
	 /*** exceute the query ***/
	 $stmt->execute(); 
	
	 /*** set the fetch mode to associative array ***/
	 $stmt->setFetchMode(PDO::FETCH_ASSOC);
	
	 /*** set the header for the image ***/
	 $array = $stmt->fetch();
	 /*** check we have a single image and type ***/
	 if(sizeof($array) == 2)
	 {
		 //To Display Image File from Database
		 echo '';

	 }
	 else
	 {
	 throw new Exception("Out of bounds Error");
	 }
	 }
	 catch(PDOException $e)
	 {
	 echo $e->getMessage();
	 }
	 catch(Exception $e)
	 {
	 echo $e->getMessage();
	 }
	 }
	 else
	 {
	 echo 'Please input correct Image ID';
	 }
 }
 else
 {
 /*** throw an exception is image is not of type ***/
 throw new Exception("File Size Error");
 }
}
}
}
else
{
echo "***Invalid file Size or Type***";
}
}
?>

You can download the entire code from here http://www.filehosting.org/file/details/569640/upload.zip. Change the database details and also image displayed is the last insert id in the form . I hope you can do the rest.

upload image from submit form to mysql database and display image in div?

Answers (1)

Related Questions