There are systems that require images to be part of the content you are uploading to the online server. Most eCommerce websites that deal with displaying products to users online cannot be complete without images.
As a developer, you cannot go the old way of uploading images separately to a defined location in the server and then marching them to the products in the database. This is not a scalable way to use it. So what you need to do is to allow anyone interacting with such a system privilege of uploading content including images in a defined section.
As new technologies are being invented day in day out, you need to keep yourself in the know of what is now being preferred as a method of uploading images to a database using the PHP language.
PHP cannot accomplish this task of uploading images to the server alone as it will require a markup language to display the input field to the user and also data submission will be done using jQuery.
In this article, I will highlight step by step how to upload images to online server and store data in the database in the Cpanel. I will use bootstrap framework to display form data, jQuery to help in the submission of data, PHP to help process the data, and finally, MySQL to store data in the database.
To begin;
- You will need to define a form that will be used to capture data. For this case, I will have two fields that I will collect data which I will name as product_name and product_image.
The datatype of product_name will be text while that of product_image will be a file. When you add a datatype file, it is interpreted as a format that is needed to choose a file from the device used to access the form data.
The type file when used allows the user to browse any type of file from the device.
<input type="file" name="product_image" class="form-control" required>
To prevent browsing and allowing any type of file to be uploaded, we add another attribute called accept. Accept allows different kinds of data.
* accepts all kinds of files
image/* accepts all kinds of images
image/png accepts png images only
image/jpg accepts jpg image type only.
You can decide which file type you will use depending on what you want to achieve. You can add the accept attribute as follows
<input type="file" name="product_image" class="form-control" accept="image/*" required>
To add like two or three types of image but you do not want to include all, you can separate the types with a comma sign (,) as shown
<input type="file" name="product_image" class="form-control" accept="image/png, image/jpeg" required>
- Next, you will need to allow upload of the files or image while defining your form. When defining the form you will need to add an attribute called encrypt which will hold multipart/form-data values. This defines the content-type to use when submitting the form.
<form method="post" enctype="multipart/form-data">
</form>
Since we are not going to submit data to another page, we shall not include the action attribute but we shall define a form id.
The compiled code for the form including the input type is as below
<form method="post" id="submitdata" enctype="multipart/form-data">
<label>Product name</label>
<input type="text" name="product_name" class="form-control" required>
<label>Image to upload</label>
<input type="file" name="product_image" class="form-control" accept="image/png, image/jpeg" required>
</form>
- Next, we shall collect the form attributes using jquery. We shall use the submit function provided by jquery and also to prevent the page from reloading since the form method is post we use the preventDefault() method.
<script>$("#submitdata").submit(function(e){
e.preventDefault();
});
</script>
To collect form data as whole, we use the code below
var formdata= new FormData(this);
The variable formdata in this case is the one we will use to hold all the form data. The full code snippet for jQuery will be as shown below
<script>
$("#submitdata").submit(function(e){
e.preventDefault();
$.ajax({
url: 'Your url here',
data: formdata,
type: 'POST',
contentType: false,
processData: false,
success: function(data) {
}
});
});
</script>
url is the file where you send the data for processing
data is the form data entered in the form
type hold the POST parameter as we are sending data to the server
success is used when data is processed to receive the result of the url
- Next, we shall move to the URL we have defined in the above script where we shall process the data. This will be a .php file.
To do this you will need to create a folder in your server where you will store your images, for this example we shall use a folder called images in the public_html folder
The PHP code to upload image to the folder and save to database table called images will be as follows.
Remember image is saved in the folder and the name of the image saved in the database.
<?php
$image = $_FILES['product_image']['name']; //the original name of the image
$file_tmp =$_FILES['product_image']['tmp_name']; //The temporary filename of the file in which the uploaded image was stored on the server.
move_uploaded_file($file_tmp,"images/".$image) //uploads the image to the defined folder
mysqli_query($con, "INSERT INTO images(imagename) VALUES('$image')"; //inserting the image name to the database.
?>
For the above code to work ensure that jQuery is included in your front end file else data will not be submitted to the PHP file for processing.
The above steps have highlighted the steps followed to upload image to the server using HTML, jQuery, and PHP.
