PHP 8 Multiple File Upload using Ajax Example Tutorial

Jun 25, 2022 . Admin

Hello dev,

Today, I will let you know example of PHP 8 Multiple File Upload using Ajax Example Tutorial. this example will help you PHP 8 Ajax Multiple File 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 File Upload in PHP 8 with jQuery.

This article will give you simple example of PHP 8 Upload multiple files jQuery Ajax

So, let's see bellow solution:

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>PHP 8 Multiple File Upload using Ajax Example Tutorial</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 - 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 File : </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: