In this tutorial, we create a form that takes an image and some text. When the user selects an image and enters some text and clicks the submit button, the data is submitted to the server. PHP now grabs the image and saves it in a folder in the project, and then saves the text in the database together with a link pointing to the image in the folder.
Server-side file upload can be easily implemented using PHP. There are various ways available to upload image to server and display images on the webpage. Generally, in a dynamic web application, the uploaded image is stored in a directory of the server and the file name is inserted in the database. Later, the images are retrieved from the server based on the file name stored in the database and display on the web page.
The image can be uploaded directly to the database without storing on the server. But it will increase the database size and web page load time. So, it’s always a good idea to upload images to the server and store file names in the database. In this tutorial, we will show you the entire process to upload and store the image file in MySQL database using PHP.
Create a database called image_upload and create a table called images with fields:
- id – int(11)
- image – varchar(100)
- image_text – text
Create a file called index.php and page the following code in it (the complete code):
index.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<?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.
Be sure to include the enctype in your form tag. Like this:
|
1 2 3 |
<form method="POST" action="index.php" enctype="multipart/form-data"> |
Without the attribute enctype=”multipart/form-data”, the image won’t be uploaded. enctype is the encoding type that specifies how the form-data should be encoded when submitting the form. Without it file uploads won’t work.
Here we have shown the most effective way to implement image upload functionality on the website. You can easily extend the file upload functionality as per your requirements.
