Upload Multiple Images Using JQUERY AJAX PHP

Upload Multiple Images Using JQUERY AJAX PHP

Upload Multiple Images Using JQUERY AJAX PHP

0 Sales

Free

 

The feature of photo sharing is widely used in the web application and can be easily implemented with PHP. But if you want image upload functionality to be implemented without page refresh, PHP requires jQuery and Ajax. Upload image without page refresh provides the web application with a user-friendly interface. The user can upload images without reloading or refreshing the current page with Ajax file upload.

 

The file input sector usually uploads one image at a time. But in some cases, allowing the user to upload multiple images at the same time is required for your web application. In this tutorial, we will teach you how to use jQuery, Ajax, and PHP to upload multiple images without page refresh. Ajax multiple image upload allows the user to pick multiple image files in one click and upload all images to the server.

 

Using jQuery, Ajax, and PHP, the example code helps you to upload multiple images at once with no page refresh. It simplifies the uploading of multiple images without refreshing the page. There are two ways of showing the preview of uploaded files. You can view uploaded images stored in a database folder with or without them.

 

Multiple Files Upload Form

We will use HTML to create the upload form for the file and the jQuery to upload the images to the server side.

JavaScript Code:

The plugin jQuery form will be used to post data files via Ajax. It enables you to upgrade the upload form for HTML files to use AJAX. Include the jQuery library and jQuery Form Plugin to submit the form using jQuery Ajax with files to upload.

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.form.js"></script>



 

The jQuery Form Plugin's ajaxForm method prepares the HTML form for submission to AJAX. It is possible to pass any $.ajax options in ajaxForm() function.

 

  • Target – Specify the element(s) for the server response to be modified.

  • BeforeSubmit – Callback function invoked prior to submission of the form.

  • Success – Callback function that was invoked from the server after the response was returned.

  • Error – Callback function invoked in the event of an error.

 

<script>

$(document).ready(function(){

    $('#uploadForm').ajaxForm({

        target:'#imagesPreview',

        beforeSubmit:function(){

            $('#uploadStatus').html('<img src="uploading.gif"/>');

        },

        success:function(){

            $('#images').val('');

            $('#uploadStatus').html('');

        },

        error:function(){

            $('#uploadStatus').html('Images upload failed, please try again.');

        }

    });

});

</script>



 

HTML Code:

Develop an input field HTML form to allow the user to select multiple images to upload.

  • These attributes must be included in the < form > tag – method="post "and enctype="multipart / form-data" 

  • The < input > tag must include type="file "and multiple attributes.

<!-- images upload form -->

<form method="post" id="uploadForm" enctype="multipart/form-data" action="upload.php">

    <label>Choose Images</label>

    <input type="file" name="images[]" id="images" multiple >

    <input type="submit" name="submit" value="UPLOAD"/>

</form>


<!-- display upload status -->

<div id="uploadStatus"></div>


Downloaded Images Preview: Build div with target ID specified in the Form Plugin API ajaxForm. The downloaded images are shown in this table.

<!-- gallery view of uploaded images --> 

<div class="gallery" id="imagesPreview"></div>

Upload Multiple Images with PHP (upload.php)

 

The upload.php file uses PHP to process the multiple image upload and render the images uploaded in a gallery view.

 

  • Specify the route for uploading the data.

  • Use pathinfo() in PHP to get the file extension and check if the user selects only the image files.

  • Use the move uploaded file() function to upload images to the server in PHP.

  • Generate the uploaded images gallery view. This view will be displayed in the ajaxForm target component.

 

<?php

if(isset($_POST['submit'])){

    // File upload configuration

    $targetDir = "uploads/";

    $allowTypes = array('jpg','png','jpeg','gif');

    

    $images_arr = array();

    foreach($_FILES['images']['name'] as $key=>$val){

        $image_name = $_FILES['images']['name'][$key];

        $tmp_name   = $_FILES['images']['tmp_name'][$key];

        $size       = $_FILES['images']['size'][$key];

        $type       = $_FILES['images']['type'][$key];

        $error      = $_FILES['images']['error'][$key];

        

        // File upload path

        $fileName = basename($_FILES['images']['name'][$key]);

        $targetFilePath = $targetDir . $fileName;

        

        // Check whether file type is valid

        $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);

        if(in_array($fileType, $allowTypes)){    

            // Store images on the server

            if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$targetFilePath)){

                $images_arr[] = $targetFilePath;

            }

        }

    }

    

    // Generate gallery view of the images

    if(!empty($images_arr)){ ?>

        <ul>

        <?php foreach($images_arr as $image_src){ ?>

            <li><img src="<?php echo $image_src; ?>" alt=""></li>

        <?php } ?>

        </ul>

<?php }

}

?>


 

You can upload the images without being stored on the server and render the preview of the images.

 

<?php

    $images_arr = array();

    foreach($_FILES['images']['name'] as $key=>$val){

        //display images without stored

        $extra_info = getimagesize($_FILES['images']['tmp_name'][$key]);

        $images_arr[] = "data:" . $extra_info["mime"] . ";base64," . base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));

    }

?>

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 14, 2020

Updated Date : May 14, 2020

Ratings

Comments : 0

Downloads : 0