Multiple Image Uploader

Hello guys,

Today i need to develop Multiple Image Uploader for my project purpose, so first i searched on Google and i also got so many widgets, but all widget have heavy coding which is not easy to understand. so i thought let’s develop it with my own logic and i did it.!

multiimageuploader

I used JQuery and HTML and PHP for this small widget. don’t worry this is very simple and easy to understand. 🙂

so let’s Go For CodinG…..!

HTML-CODE

<html>
<head>
<title>Image Uploader</title>
<script src="jquery.js"> </script>
<script>
var i=0;
$("#add").live("click",function(){
i++;
document.getElementById("count").value=i;
$("#file").append("<input type='file' name='file"+i+"'><br>");
});
</script>
</head>
<body>
<div style="border:2px solid blue; width:550px;">
<form method="post" action="uploadarticle.php" enctype="multipart/form-data">
<input type="hidden" name="count" id="count">
<table border="0">
<tr>
<td> <b>Upload Image here </b></td>
</tr>
<tr>
<tr>
<td> <input type="file" name="file0"> </td><td> <img src="zoomin1.png" width="35" heigth="35" id="add"> </td>
<td> &nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="upload"> </td>
</tr>
</table>
<div id="file"></div>
</form>
</div>
</body>
</html>

PHP-CODE

<?php
$count = $_POST["count"];
for($i=0;$i<=$count;$i++)
{
    if ($_FILES["file".$i]["error"] > 0)
    {
         echo "Error: " . $_FILES["file".$i]["error"] . "<br />";
    }
   else
   {
      move_uploaded_file($_FILES["file".$i]["tmp_name"],"upload/" .      $_FILES["file".$i]["name"] );
     echo "<script>alert('IMAGE uploaded successfully')</script>";
   }
}
?>

NOTE:

  • Create directory with name upload to run this widget.
  • and you must have jquery.js file inside your current directory.
  • put bellow image in your current directory. or you can also place your image if u don’t like mine . :/

zoomin1

 

Hope you like my widget.!!
🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s