How to upload multiple file and move into folder in php? - php

Question

code:
<?php
if(isset($_POST['submit']))
{
if(isset($_FILES['img_url']['name']))
{
for($i=0; $i<count($_FILES['img_url']['name']); $i++)
{
$tmpFilePath = $_FILES['img_url']['tmp_name'][$i];
if ($tmpFilePath != "")
{
$path = "../images/hotel_images/";
$name = $_FILES['img_url']['name'][$i];
$size = $_FILES['img_url']['size'][$i];
list($txt, $ext) = explode(".", $name);
$file= time().substr(str_replace(" ", "_", $txt), 0);
$info = pathinfo($file);
$filename = $file.".".$ext;
$filepath_upload = $path.$filename;
$imageFileType = strtolower(pathinfo($filename,PATHINFO_EXTENSION));
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" )
{
$j2 = $i+1;
$msg = "<div class='alert alert-success'>Sorry, ".$j2." Image files Extension .".$ext." are not Uploaded & Other files Uploaded Successfully <br/>.</div>" ;
}
else if(move_uploaded_file($_FILES['img_url']['tmp_name'][$i], $filepath_upload))
{
$banner_image_source_file = $filepath_upload;
$banner_image_save_file = $filepath_upload;
list($width_orig, $height_orig) = getimagesize($banner_image_source_file);
$img_url_name.=$filename."|";
}
}
$filepath = rtrim($img_url_name, '|');
}
if(!empty($filepath))
{
$query = mysqli_query($con, "INSERT INTO `hotel`(`img_url`, `status`) VALUES ('".$filepath."')");
if($query)
{
$msg .= "<div class='alert alert-success'>Hotel Record Added Successfully</div>";
}
else
{
$msg = "<div class='alert alert-success'>Unbale to Add Hotel Record Please Try Again !!!</div>";
}
}
else
{
$msg = "<div class='alert alert-success'>Unable to Add Please Try Again !! </div>";
}
}
else
{
$msg = "<div class='alert alert-success'>Unable to Add Please Try Again !! </div>";
}
}
?>
<form action="" method="POST" enctype="multipart/form-data" id="add-hotel-form">
<div class="form-group col-md-12">
<label for="hotel">Upload Hotel Images</label>
<input type="file" class="form-control-file" id="upload_hotel_img1" name="img_url[]" multiple>
</div>
<div class="form-group col-md-12">
<label for="room">Upload Room Images</label>
<input type="file" class="form-control-file" id="upload_room_img1" name="img_url2[]" multiple>
</div>
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
In the following code I have create a simple form where I have two input field type='file' where I am able to upload only first one i.e. <label for="hotel">Upload Hotel Images</label> and move into the folder successfully but I also want to upload and move second input field i.e. <label for="room">Upload Room Images</label>. I don't have any idea about this. So, How can I do this? Please help me.
Thank You

Answer 1

Your Room Image input is called img_url2, which you never interact with in code.
For best practice, move the bulk of your PHP code into a file upload function, then call it once with img_url $_FILE input, and once with img_url2.
Example:
<?php
error_reporting(E_ALL);
ini_set("display_errors", true);
ini_set("display_startup_errors", true);
function uploadFile($file, $path)
{
$img_url_name = "";
if(is_array($file) && isset($file['name']) && isset($file['tmp_name']) && isset($file['size']))
{
$tmpFilePath = isset($file['tmp_name'][0]) ? $file['tmp_name'][0] : "";
$name = isset($file['name'][0]) ? $file['name'][0] : "";
list($txt, $ext) = explode(".", $name);
$file = time().substr(str_replace(" ", "_", $txt), 0);
$filename = $file.".".$ext;
$filepath_upload = $path.$filename;
$imageFileType = strtolower(pathinfo($filename,PATHINFO_EXTENSION));
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" )
{
return "<div class='alert alert-success'>Sorry, ".$name." Image files Extension .".$ext." are not Uploaded & Other files Uploaded Successfully <br/>.</div>" ;
}
else if(move_uploaded_file($tmpFilePath, $filepath_upload))
{
$img_url_name .= $filename."|";
}
$filepath = rtrim($img_url_name, '|');
if(!empty($filepath))
{
if(!isset($con))
{
global $con;
}
$query = mysqli_query($con, "INSERT INTO `hotel`(`img_url`, `room_url`) VALUES ('".$filename."','".$filepath."')");
if($query)
{
return "<div class='alert alert-success'>Hotel Record Added Successfully</div>";
}
}
}
return "<div class='alert alert-success'>Unable to Add Please Try Again !! </div>";
}
if(isset($_POST['submit']))
{
if(isset($_FILES['img_url']['name']))
{
echo uploadFile($_FILES['img_url'], "../images/hotel_images/");
}
if(isset($_FILES['img_url2']['name']))
{
echo uploadFile($_FILES['img_url2'], "../images/room_img/");
}
}
?>
<form action="" method="POST" enctype="multipart/form-data" id="add-hotel-form">
<div class="form-group col-md-12">
<label for="hotel">Upload Hotel Images</label>
<input type="file" class="form-control-file" id="upload_hotel_img1" name="img_url" multiple>
</div>
<div class="form-group col-md-12">
<label for="room">Upload Room Images</label>
<input type="file" class="form-control-file" id="upload_room_img1" name="img_url2" multiple>
</div>
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>

Answer 2

I use FormData() to upload multiple images from multiple fields. Please take a look at this code:
<head>
<title>Example</title>
</head>
<body>
<form enctype="multipart/form-data" id="add-hotel-form">
<div class="form-group col-md-12">
<label for="hotel">Upload Hotel Images</label>
<input type="file" class="form-control-file" id="upload_hotel_img1" name="img_url" multiple>
</div>
<div class="form-group col-md-12">
<label for="room">Upload Room Images</label>
<input type="file" class="form-control-file" id="upload_room_img2" name="img_url2" multiple>
</div>
<input type="button" class="btn btn-primary" name="submit" value="Submit" onclick="myfunction();">
</form>
</body>
<script>
function myfunction(){
var form_data = new FormData();
var image = document.getElementById('upload_hotel_img1').files.length;
var images = document.getElementById('upload_room_img2').files.length;
for (var x = 0; x < image; x++) {
form_data.append("image", document.getElementById('upload_hotel_img1').files[x]);
}
for (var x = 0; x < images; x++) {
form_data.append("images[]", document.getElementById('upload_room_img2').files[x]);
}
}
</script>
We can retrieve these images in the backend using the follwing : $_FILES["image"]['name'] and $_FILES["images"]['name'] respectively.