Upload Multiple Images In PHP With Preview
Last Updated : Mar 11, 2024
IN - PHP | Written & Updated By - Pragati
In this tutorial we will show you the solution of upload multiple images in PHP with preview, mainly there are many ways with help of which we can upload multiple images in php with preview.
But we are going to show you a simple way with help of which this article will be completed. Let us see.
Step By Step Guide On Upload Multiple Images In PHP With Preview :-
Here, we are going to show you three simple steps to upload multiple and preview images in php. That are:
- Create a Simple HTML form with bootstrap or custom CSS files.
- Use JavaScript to preview images
- And create a php file to upload images.
Let us see the codes below:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<style>
.container {
max-width: 1200px;
}
.card{
float: left;
}
</style>
</head>
<body>
<div class="container mt-5">
<form action="uploadImages.php" method="POST" enctype="multipart/form-data" id="imageFormInput">
<div class="custom-file">
<input type="file" id="uploadImageHere" class="form-control form-control-lg" name="uploadImageHere[]" onchange="showImageFunc();" multiple/>
<label class="custom-file-label" for="chooseImage">Select file</label>
</div>
<input type="submit" name="uploadImage" class="btn btn-primary btn-block mt-4" value="Upload"/>
</form>
<div class="user-image mb-3 text-center">
<div id="showImageHere">
<div class="card-group">
<div class="row">
<!-- Image preview -->
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#imageFormInput').ajaxForm(function() {
alert("Uploaded!");
});
});
function showImageFunc() {
var total_images=document.getElementById("uploadImageHere").files.length;
for(var i=0;i<total_images;i++) {
$('#showImageHere').append("<div class='card col-md-4'><img class='card-img-top' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
}
}</script>
<script>
$(document).ready(function() {
$('#imageFormInput').ajaxForm(function() {
alert("Uploaded!");
});
});
function showImageFunc() {
var total_images=document.getElementById("uploadImageHere").files.length;
for(var i=0;i<total_images;i++) {
$('#showImageHere').append("<div class='card col-md-4'><img class='card-img-top' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
}
}
</script>
</body>
</html>
uploadImages.php
<?php
if(isset($_POST['uploadImages'])) {
for($i=0;$i<count($_FILES["uploadImageHere"]["name"]);$i++) {
$uploadImage=$_FILES["uploadImageHere"]["tmp_name"][$i];
$folder="gallery/";
move_uploaded_file($_FILES["uploadImageHere"]["tmp_name"][$i], "$folder".$_FILES["uploadImageHere"]["name"][$i]);
}
exit();
}
?>
- Here, as we can see that we first create an html form and then add some external links or say cdn files. Then we create a simple form to upload images from user. We are not going to discuss the whole html file.
- We just create input tag of type file and a button to submit that file.
- After that we use some jQuery codes to show the message that file has been uploaded and make an ability to upload multiple images.
- Now, our next job is to add JavaScript codes to show images preview that we upload. For this we can also create an external file for better understanding, but we use here internal JavaScript.
- Inside this JavaScript file we only use the codes to preview images.
- Now, the last step is to create a php file that come in action when you submit your form or say when you click on submit button.
- This helps to upload multiple images and save it in a folder using move_uplaod_file() function.
- If you want to know about any function used here in brief then you can search from our website for better understanding.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to upload multiple images in php with preview.
I hope this tutorial on upload multiple images in PHP with preview helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
