PHP 8 Multiple File Upload using Ajax Example Tutorial

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

PHP 8 Multiple File Upload using Ajax Example Tutorial

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).

Creating Database
Creating Database

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)
);
Creating Table
Creating Table

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:

Multiple Image Upload Form - PHP 8 Multiple File Upload using Ajax Example Tutorial
Multiple Image Upload Form
Error Message - PHP 8 Multiple File Upload using Ajax Example Tutorial
Error Message
Uploaded Successfully - PHP 8 Multiple File Upload using Ajax Example Tutorial
Uploaded Successfully

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)

2 Comments

Leave a Reply