Skip to content

All topics  /  PHP

How to Upload Multiple Files with Ajax and PHP 8?

PHP ·

Teams applying “How to Upload Multiple Files with Ajax and PHP 8?” in a production project can use the linked project resource to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.

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

More on this topic