Multiple File Upload Ajax with PHP MySQL Example
Mar 14, 2022 . Admin
Hello dev,
I am going to explain you Ajax multiple file upload PHP MySQL. You will learn how to multiple file upload using Ajax and PHP MySQL. In side this article we will see how to upload file using Ajax, jQuery, PHP and MySQL.
This article will give you simple example of how to upload multiple files using PHP, MySQL and AJAX. We will use get simple ajax multiple files upload in PHP MySQL Database.
I will give you simple Example how to multiple file upload in PHP MySQL using Ajax so follow this and learn multiple image upload with jQuery, PHP and MySQL.
So, let's see bellow solution:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple File Upload Ajax with PHP MySQL - Mywebtuts.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>Multiple File Upload Ajax with PHP MySQL - Mywebtuts.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 Image : </strong><span class="text-danger"> *</span></label>
<input type="file" class="form-control" name="multipleFile[]" id="multipleFile" multiple>
<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>
store.php
<?php
$sernamename = "localhost";
$username = "root";
$passoword = "";
$databasename= "store";
$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 user(file) VALUES('$newFile')";
mysqli_query($con, $query);
}
}
}
}
}
?>
Output:
It will help you...