How to Upload Multiple Files with Ajax and PHP 8?

PHP 8

Nicesnippets

25-06-2022


How to Upload Multiple Files with Ajax and PHP 8?

Hello dev,

This post is focused on How to Upload Multiple Files with AJAX and PHP 8. this example will help you PHP 8 Multiple File Upload using Ajax Example Tutorial. you will learn PHP 8 Ajax Multiple File Upload Example. This post will give you simple example of AJAX Image and File Upload in PHP 8 with jQuery. Let's get started with PHP 8 Upload multiple files jQuery Ajax.

This article will give you simple example of PHP 8 Ajax Multiple File Upload

So, let's see bellow solution:

index.php


<!DOCTYPE html>

<html lang="en">

<head>

<title>How to Upload Multiple Files with Ajax and PHP 8?</Nicesnippets.com;

<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>How to Upload Multiple Files with Ajax and PHP 8? - Nicesnippets.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...