We construct a type in this tutorial that takes up an image and some text. The data will be sent to the server when the user selects an image and enters some text, and clicks the submit button. PHP now captures the image and saves it to a project folder, and then saves the text to the database along with a connection pointing to the picture in the folder.
Create a database called image upload, and create a table with fields called images:
- id - int(11)
- image - varchar(100)
- image_text - text
or use this code to create table
Example
CREATE TABLE `image_upload` ( `id` int(11) NOT NULL, `image` varchar(100) NOT NULL, `image_text` varchar(1000) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Create a file called index.php and page the following code in it (the complete code):
Example
<?php
// Create database connection
$db = mysqli_connect("localhost", "root", "", "image_upload");
// Initialize message variable
$msg = "";
// If upload button is clicked ...
if (isset($_POST['upload'])) {
// Get image name
$image = $_FILES['image']['name'];
// Get text
$image_text = mysqli_real_escape_string($db, $_POST['image_text']);
// image file directory
$target = "images/".basename($image);
$sql = "INSERT INTO images (image, image_text) VALUES ('$image', '$image_text')";
// execute query
mysqli_query($db, $sql);
if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
$msg = "Image uploaded successfully";
}else{
$msg = "Failed to upload image";
}
}
$result = mysqli_query($db, "SELECT * FROM images");
?>
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
<style type="text/css">
#content{
width: 50%;
margin: 20px auto;
border: 1px solid #cbcbcb;
}
form{
width: 50%;
margin: 20px auto;
}
form div{
margin-top: 5px;
}
#img_div{
width: 80%;
padding: 5px;
margin: 15px auto;
border: 1px solid #cbcbcb;
}
#img_div:after{
content: "";
display: block;
clear: both;
}
img{
float: left;
margin: 5px;
width: 300px;
height: 140px;
}
</style>
</head>
<body>
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
echo "<img src='images/".$row['image']."' >";
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
<form method="POST" action="index.php" enctype="multipart/form-data">
<input type="hidden" name="size" value="1000000">
<div>
<input type="file" name="image">
</div>
<div>
<textarea
id="text"
cols="40"
rows="4"
name="image_text"
placeholder="Say something about this image..."></textarea>
</div>
<div>
<button type="submit" name="upload">POST</button>
</div>
</form>
</div>
</body>
</html>And that's all.
Make sure to include the enctype in your tag of shape. Like this:
Example
<form method="POST" action="index.php" enctype="multipart/form-data">
The image will not be uploaded without the attribute enctype="multipart/form-data". Enctype is the encoding style that determines how to encode the document-data when sending the form. Uploads of files without it won't work.
Check out these related:
- How to compress image while uploading using php
- Login with facebook SDK using PHP
- Online Examination System Project in Php - Adzetech
- PayPal Payment Gateway Integration using PHP and MYSQL
- Image upload using php and MySQL database
- How to create pagination system using PHP and MYSQL?
- Student Management System Project in Codeigniter - Adzetech
Leave comment