Today, we are going to learn PHP 8 Multiple File Upload using Ajax Example Tutorial. This tutorial will cover on how to upload multiple file using ajax in php 8.
I will let you know example of PHP 8 Multiple Files Upload using Ajax Example Tutorial. this example will help you PHP 8 Ajax Multiple Files Upload Example. you will learn How to upload Multiple files with jQuery AJAX and PHP 8. we will help you to give example of AJAX Image and Files Upload in PHP 8 with jQuery.
Steps for PHP 8 Multiple File Upload using Ajax Example Tutorial:
- Step 1: Creating Database
- Step 2: Create Index PHP File
- Step 3: Create Store PHP File
- Step 4: Testing
- Step 5: Conclusion
Also Read: PHP Registration Form with Mobile OTP Verification Example
Step 1: Creating Database
Firstly, We are going to create a database in phpmyadmin. Open phpmyadmin and create a database with name “multiple_image_upload” (you can use whatever name you like).
After that run the following query to create a users table.
CREATE TABLE users(
id INT AUTO_INCREMENT NOT NULL,
filename VARCHAR(50) NOT NULL,
primary key (id)
);
Also Read: How to Remove a Specific Element From an Array in PHP
Step 2: Create Index PHP File
Now we are going to create a index php file. Create a index.php file in project directory and enter the following code into it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP 8 Multiple File Upload using Ajax Example Tutorial - LaravelTuts.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card m-auto w-75">
<div class="card-header text-center text-white bg-dark">
<h4>PHP 8 Multiple File Upload using Ajax Example Tutorial - LaravelTuts.com</h4>
</div>
<div class="card-body">
<div class="alert alert-success alert-dismissible" id="success" style="display: none;">
<button type="button" class="close" data-dismiss="alert">×</button>
File uploaded successfully
</div>
<form id="submitForm">
<div class="form-group">
<label><strong>Select File : </strong><span class="text-danger"> *</span></label>
<input type="file" class="form-control" name="multipleFile[]" id="multipleFile" multiple style="padding: 3px;">
<span id="error" class="text-danger"></span><br>
</div>
<div class="form-group d-flex justify-content-center">
<button type="submit" name="upload" class="btn btn-primary">Upload</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("input").prop('required',true);
$('#multipleFile').change(function () {
var ext = this.value.match(/\.(.+)$/)[1];
switch (ext) {
case 'txt':
case 'pdf':
case 'docx':
case 'csv':
case 'xlsx':
$('#error').text("");
$('button').attr('disabled', false);
break;
default:
$('#error').text("File must be of type txt,pdf,docx,csv,xlsx.");
$('button').attr('disabled', true);
this.value = '';
}
});
$("#submitForm").on("submit", function(e){
e.preventDefault();
$.ajax({
url :"store.php",
type :"POST",
cache:false,
contentType : false, // you can also use multipart/form-data replace of false
processData : false,
data: new FormData(this),
success:function(response){
$("#success").show();
$("#success").fadeOut(2800);
}
});
});
});
</script>
</body>
</html>Also Read: Upload Images to Server PHP Tutorial (2022)
Step 3: Create Store PHP File
Finally we are going to create a store php file. Create a store.php file inside project directory and enter the following code into it.
<?php
$sernamename = "localhost";
$username = "root";
$passoword = "";
$databasename= "multiple_image_upload";
$con = mysqli_connect($sernamename, $username,$passoword,$databasename);
if ($con->connect_error) {
die("Connection failed". $con->connect_error);
}
if (!empty($_FILES['multipleFile']['name'])) {
$multiplefile = $_FILES['multipleFile']['name'];
foreach ($multiplefile as $name => $value) {
$allowFile = array('txt','pdf','docx','csv','xlsx');
$fileExnt = explode('.', $multiplefile[$name]);
if (in_array($fileExnt[1], $allowFile)) {
if ($_FILES['multipleFile']['size'][$name] > 0 && $_FILES['multipleFile']['error'][$name]== 0) {
$fileTmp = $_FILES['multipleFile']['tmp_name'][$name];
$newFile = rand(). '.'. $fileExnt[1];
$target_dir = 'uploads/'.$newFile;
if (move_uploaded_file($fileTmp, $target_dir)) {
$query = "INSERT INTO users(filename) VALUES('$newFile')";
mysqli_query($con, $query);
}
}
}
}
}
?>Note: Please make a change to the database details accordingly as per your requirement.
Also Read: Integration PayPal Payment Gateway in PHP
Step 4: Testing
Now its time to test our PHP 8 Multiple Files Upload using Ajax Example Tutorial. Open any web browser and enter the following URL.
http://localhost/multiple_image_upload/Note: Change the folder name if you had a different name.
Preview:
Step 5: Conclusion
Today, We had learn PHP 8 Multiple File Upload using Ajax Example Tutorial. Hope this tutorial helped you with learning PHP. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.
Also Read: Drag & Drop Reorder Images in PHP (2022)
[…] Also Read: PHP 8 Multiple File Upload using Ajax Example Tutorial […]
[…] Also Read: PHP 8 Multiple File Upload using Ajax Example Tutorial […]