Multiple Image Upload using Ajax in PHP MySQL Example
Mar 10, 2022 . Admin
Hello Friends,
I am going to explain you PHP MySQL AJAX multiple image upload. You will learn how to PHP AJAX upload multiple image. In side this article we will see how to multiple image upload using AJAX PHP MySQL.
This article will give you simple example of multiple image upload using AJAX PHP MySQL. We will use get simple upload multiple image Jquery AJAX PHP MySQL.
You can use from how to upload multiple image in Database using PHP and MySQL. I will give you simple how to multiple image upload Jquery AJAX PHP MySQL.
So, let's see bellow solution:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple Image Upload Ajax 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" style="background: #0c06f3">
<h4>Multiple Image Upload Ajax 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 id="preview"></div>
<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" required="" multiple>
</div>
<div class="form-group d-flex justify-content-center">
<button type="submit" name="upload" class="btn btn-success">Upload</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
function previewImages() {
var $preview = $('#preview').empty();
if (this.files) $.each(this.files, readAndPreview);
function readAndPreview(i, file) {
var reader = new FileReader();
$(reader).on("load", function() {
$preview.append($("<img/>", {src:this.result, height:100}));
});
reader.readAsDataURL(file);
}
}
$('#multipleFile').on("change", previewImages);
$("#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();
$("#multipleFile").val("");
}
});
});
});
</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) {
$allowImg = array('png','jpeg','jpg','');
$fileExnt = explode('.', $multiplefile[$name]);
if (in_array($fileExnt[1], $allowImg)) {
if ($_FILES['multipleFile']['size'][$name] > 0 && $_FILES['multipleFile']['error'][$name]== 0) {
$fileTmp = $_FILES['multipleFile']['tmp_name'][$name];
$newFile = rand(). '.'. $fileExnt[1];
$target_dir = 'c:/xampp7/htdocs/uploads/'.$newFile;
if (move_uploaded_file($fileTmp, $target_dir)) {
$query = "INSERT INTO user(image) VALUES('$newFile')";
mysqli_query($con, $query);
}
}
}
}
}
?>
Output:
It will help you...