How to upload and retrieve multiple images using php

04/03/2017   03:47:05 PM

Hello, in this tutorial I will explain how to upload multiple images without refreshing the page.In this simple tutorial, we’ll discuss multiple images uploads using jQuery, Ajax and PHP.

Using our script, you can upload multiple images at once without page refresh using jQuery, Ajax and PHP.

Read the following step-by-step guide to understanding the whole process of Upload multiple images.

1) Create Database Table

  • First create a table inside your database. I have created a simple table named upload_image as you can see in the below image.

 

2) Create dbConfig.php page

In this step we have to connect to the database to store the image in database. You can connect to any database from which you want to get the data.

<?php

define ("DB_HOST", "localhost"); // set database host

define ("DB_USER", "root"); // set database user

define ("DB_PASS",""); // set database password

define ("DB_NAME","sampledb"); // set database name

 

$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("Couldn't make connection.");

$db = mysql_select_db(DB_NAME, $link) or die("Couldn't select database");

?>

 

3) Create index.php page

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

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

<script type="text/javascript">

$(document).ready(function()

{

$('#deskImg').die('click').live('change', function()                            

{

//$("#displayImg").html('');

$("#frm").ajaxForm({target: '#displayImg',

beforeSubmit:function(){                               

//console.log('v');

$("#imgLoading").show();

$("#ingLoadButton").hide();

},

success:function(){

//console.log('z');

$("#imgLoading").hide();

$("#ingLoadButton").show();

},

error:function(){

//console.log('d');

$("#imgLoading").hide();

$("#ingLoadButton").show();

} }).submit();   

});

});

</script>

<style>

.displayImg

{

width:200px;

border:solid 1px #dedede;

padding:5px;

margin:5px;

}

#displayImg

{

color:#cc0000;

font-size:12px

}

</style>

<body>

<div style="float: left; padding: 50px 0 0 175px;">

<div id='displayImg'>

</div>

<form id="frm" method="post" enctype="multipart/form-data" action='processImage.php'>

Upload your image

<div id='imgLoading' style='display:none'><img src="loading.gif" alt="Uploading...."/></div>

<div id='ingLoadButton'>

<input type="file" name="deskImg" id="deskImg" />

<input type="text" name="title">

<input type="text" name="date"

</div>

</form>

 

4) Create processImage.php page

<?php

include "dbConfig.php";

$path = "images/";

function getExtension($str)

{

         $i = strrpos($str,".");

         if (!$i) { return ""; }

         $l = strlen($str) - $i;

         $ext = substr($str,$i+1,$l);

         return $ext;

 }

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")

{

$name = $_FILES['deskImg']['name'];

$size = $_FILES['deskImg']['size'];

                                   

            if(strlen($name))

            {

                $ext = getExtension($name);

                if(in_array($ext,$valid_formats))

               {

                       if($size<(1024*1024))

                       {

                        $actual_image_name = time().substr(str_replace(" ", "_", $ext), 5).".".$ext;

                        $tmp = $_FILES['deskImg']['tmp_name'];

                        if(move_uploaded_file($tmp, $path.$actual_image_name))

                        {

                        mysql_query("INSERT INTO upload_image (path) VALUES ('$actual_image_name')");

                                                                                                           

            echo "<img src='images/".$actual_image_name."'  class='displayImg'>";

                        }

            else

                        echo "Fail upload folder with read access.";

            }

            else

                        echo "Image file size max 1 MB";                                                     

                        }

                        else

                        echo "Error in Invalid file format or Extension ..";    

            }

                                               

            else

            echo "Please select image to upload..!";

                                               

            exit;

            }

?>


Output

                   

Support us by Sharing