How to Upload Multiple Image with jQuery Ajax and PHP 8?

Hello Dev’s , Today now in this post i wll show you How to Upload Multiple Image with jQuery Ajax and PHP 8? Here I am going to teach you an example of How we upload Multiple Image files with jQuery AJAX and PHP 8 application. Now here I will explained this very simply with step by step PHP 8 Multiple Image Upload by using Ajax Example Tutorial. So in this post i will give you a simple example of PHP 8 Ajax Multiple Image Upload Example. From here you’ll learn about Uploading both data and files in one form by using Ajax PHP 8.

So, let’s start and just follow the few step to create the example of PHP 8 Multiple Files/Images Upload in MySQL Database.

Now this article i will give you a simple example of how to Upload Multiple Image by Using the Ajax in PHP 8 also with Preview

Here we can know from here how to upload multiple image in Database by using PHP and MySQL. So I will give you a very simple example of how to multiple image upload Jquery AJAX PHP MySQL.

So, let’s start and follow the bellow solution:

index.php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to upload Multiple Image files with jQuery AJAX and PHP 8-CodingsPoint.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>How to upload Multiple Image files with jQuery AJAX and PHP 8 - CodingsPoint.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);
                    }
                }
            }
        }
    }   
?>

Read Also : How to Convert String Date to Date Format in PHP?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →