Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

How to Upload Multiple Images With Image Preview using jQuery, Ajax and PHP

by
Category:php
php ajax javascript html
How to Upload Multiple Images With Image Preview using jQuery, Ajax and PHP

In this tutorial, I will tell you how to upload multiple images with image preview without refreshing page using PHP, jQuery and Ajax. You will fine very short easy and useful script here to upload multiple images with preview. You may also like How to Preview image before upload with dynamic created input file using Jquery and How to Image Preview before upload using Jquery

HTML & jQuery Code

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script> 
        <script>
            $(document).ready(function ()
            {
                $('form').ajaxForm(function ()
                {
                    alert("Uploaded SuccessFully");
                });
            });

            function preview_image()
            {
                var total_file = document.getElementById("upload_file").files.length;
                for (var i = 0; i < total_file; i++)
                {
                    $('#image_preview').append("<img src='" + URL.createObjectURL(event.target.files[i]) + "'><br>");
                }
            }
        </script>
    </head>
    <body>

        <form action="upload.php" method="post" enctype="multipart/form-data">
            <input type="file" id="upload_file" name="upload_file[]" onchange="preview_image();" multiple/>
            <input type="submit" name='submit_image' value="Upload Image"/>
        </form>
        <div id="image_preview"></div>

    </body>
</html>

PHP Code (upload.php)

<?php
if(isset($_POST['submit_image']))
{
    for ($i = 0; $i < count($_FILES["upload_file"]["name"]); $i++) {
        $uploadfile = $_FILES["upload_file"]["tmp_name"][$i];
        $folder = "images/";
        move_uploaded_file($_FILES["upload_file"]["tmp_name"][$i], "$folder" . $_FILES["upload_file"]["name"][$i]);
    }
    exit();
}
?>

0 Comments


Html code work in comment box


Related Post