Skip to content

All topics  /  jQuery

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

jQuery ·

When “How to Upload Multiple Image with jQuery Ajax and PHP 8?” moves through design, development and browser testing, practical userra can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hello Friends,

I am going to explain you example of How to upload Multiple Image files with jQuery AJAX and PHP 8. I explained simply step by step PHP 8 Multiple Image Upload using Ajax Example Tutorial. This post will give you simple example of PHP 8 Ajax Multiple Image Upload Example. you'll learn Uploading both data and files in one form using Ajax PHP 8.

So, let's follow few step to create example of PHP 8 Multiple Files/Images Upload in MySQL Database.

This article will give you simple example of Upload Multiple Image Using Ajax in PHP 8 with Preview

You can use from how to upload multiple image in Database using PHP and MySQL. I will give you simple how to multiple image upload Jquery AJAX PHP MySQL.

So, let's see bellow solution:

index.php


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

Output:

It will help you...

More on this topic