Translate

Saturday, 18 October 2014

Multiple Images Upload using Ajax and Javascript

Explaination:
            Multiple images Upload and deleted using AJAX.In this tutorial i have briefly  explained about 
            the image uplaoding and deleted that images using ajax.Here Added Multiple images in add_images.php
            file i mentioned and edting and updating coding also i written coding for your reference.If we click on edit it will go to
            edit_packages.php page there we can delete the images using ajax and Update the images through PHP.When we Click on(X)
            ther we written ONclick Function to delete the images throgh Javascript ajax request.We will pass this request to delete_images.php
            there we have written the coding for to delete the images.I hope this is to be easily understand for ur reference to upload multiple 
            usinh AJAX,JAVASCRIPT and PHP.





Steps For 



Add_images.php:








Steps:


 =>First of all we must have written the database connect coding and include in ur file.


    
 =>enctype="multipart/form-data" ->this is must to upload images.
    
 =>Give the Image Path direction for to uplaod the images.  






Form To Upload Multiple Images:






















<html>
<body>
<form method="post" action="" enctype="multipart/form-data" onsubmit="return  Valid();">
<div class="reg_labels" style="margin-left:100px;">Images <span class='required'>*</span></div>
<div class="reg_textbox"><input  type="file" name="image2[]" multiple="multiple"  style="width:225px; height:20px;" />
</div> 
<div >
<input type="submit" name="add_images" value="Submit"/>
</div></form>

</body>

</html>
<?php
$select=mysql_query("select * from multiple_images");
$image=mysql_fetch_array($select);
?>
<div><a href="edit_images.php?id=<?php echo $image['id']; ?>" class="icon-edit">EDIT</a></div>















PHP Coding:










<?php 
$conn=mysql_connect('localhost','root','');
mysql_select_db('dbname',$conn);
if(isset($_POST['add_images'])){
$gallary_Dir = "product/";
$gallary_Dir_db = "product/";
for ($i = 0; $i < count($_FILES['image2']['name']); $i++) 
{
$ext = substr(strrchr($_FILES['image2']['name'][$i], "."), 1); 
$gal=md5(rand()*time());
$fPath = $gal.".$ext";
$fPath_db = $gallary_Dir_db.$gal.".$ext";
$FILE_PATH[] = $fPath;
$FILE_PATH_db[] = $fPath_db;
$result = move_uploaded_file($_FILES['image2']['tmp_name'][$i],'product/'.$fPath );
}
$gallary_path = (implode(',',$FILE_PATH_db));
$sql = "INSERT INTO `multiple_images`(`images`)VALUES('$gallary_path')";
mysql_query($sql);
echo"<script>alert('Added successfully');</script>";
echo "<script>window.location='add_images.php'</script>";
}
?>








edit_images.php:



Explaination:










=>Pass that id in edit_images and we get the id throuh GET or REQUEST.
=> $_GET['id'];->We have to GET the id and edit the image in edit_images.php.
=>Here also we have to select the image path.
=> <span title="Delete"  onclick="return delete_img('<?php echo $image['id']; ?>','<?php echo $imgs; ?>');">x</span>
    Here in Onclick function we have to use to delete the images.And Pass it into javascript ajax.And we will mentionmed the datas 
    to pass that values to ajax page as delete_images.php.
=>we have to include the libraray files for to use an ajax function and javascript function.






Edit-Form:




<html>
<body>
<form method="post" action="" enctype="multipart/form-data">
<div class="reg_labels" style="margin-left:100px;">Images <span class='required'>*</span></div>
<div class="reg_textbox" style="height:105px;"> <?php  if($image['images']){ ?>

<?php 
$imgrow=explode(',',$image['images']);  
foreach($imgrow as $imgs){
?>
<div>

<div style="float:left; z-index:-10; margin-top:-19px;" >
<img src="<?php echo $imgs;?>"  width="70" height="70" > 
<span title="Delete"  onclick="return delete_img('<?php echo $image['id']; ?>','<?php echo $imgs; ?>');">x</span>
</div> 
</div> 
<?php                                              
}
?>  
</div> 
<?php  }?>
<input  type="file" name="image2[]" multiple="multiple"  />
</div> 
<div class="reg_buttons">
<input type="hidden" name="hid" value="<?php echo $_GET['id'];  ?>"  >
<input type="hidden" name="oldgalimgs" value="<?php  echo $image['images'];  ?>"  >
<input type="submit" class="but_style" name="update_profile" value="Submit" />
</div>
</form>
</body>
</html>






Update PHP Coding:




<?php 
$conn=mysql_connect('localhost','root','');
mysql_select_db('dbname',$conn);
if(isset($_POST['update_profile'])){
$hid=$_POST['hid'];
$galimgs=array();
foreach($_FILES['image2']['name'] as $imgs){
$imgs=trim($imgs);
if($imgs){
$galimgs[]=$imgs;
}
}
if(count($galimgs)>0){
$gallary_Dir = "product/";
$gallary_Dir_db = "product/";
for ($i = 0; $i < count($_FILES['image2']['name']); $i++) 
{
$ext = substr(strrchr($_FILES['image2']['name'][$i], "."), 1); 
$gal=md5(rand()*time());
$fPath = $gal.".$ext";
$fPath_db = $gallary_Dir_db.$gal.".$ext";
$FILE_PATH[] = $fPath;
$FILE_PATH_db[] = $fPath_db;
$result = move_uploaded_file($_FILES['image2']['tmp_name'][$i],'product/'.$fPath);
}
$gallary_path = (implode(',',$FILE_PATH_db));   
$oldgalimgs=$_POST['oldgalimgs'];
if($oldgalimgs!=""){

$newlist=$oldgalimgs.",".$gallary_path;
}else{
$newlist=$gallary_path;
}
$sql ="UPDATE  `multiple_images` SET `images`='$newlist' WHERE id='$hid' ";
mysql_query($sql)or die(mysql_error());

}
echo"<script>alert('Updated successfully');</script>";
echo "<script>window.location=edit_images.php'</script>";
}
$select=mysql_query("select * from multiple_images");
$image=mysql_fetch_array($select);
?>





Javascript Ajax Function:








<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">

function delete_img(id,img) {
    //alert(id);
        $.ajax({
        type : "POST",
        data : "imgid="+id+"&image="+img+"&action="+"deleteimage",
        url : "delete_images.php",
        success : function(result) {
          window.location.reload();
        }   
    });
}
</script>





delete_images.php:




<?php 
$conn=mysql_connect('localhost','root','');
mysql_select_db('dbname',$conn);

if($_REQUEST['action']=='deleteimage'){

$getimgs=mysql_query("SELECT images FROM multiple_images WHERE id='".$_REQUEST['imgid']."'") or die(mysql_error());
$galrow=mysql_fetch_array($getimgs);

$gallary_image=$galrow['images'];

$imgrow=explode(',',$gallary_image);  

for($i=0;$i<count($imgrow);$i++){

if($imgrow[$i]==$_REQUEST['image']){ 
unset($imgrow[$i]); 
}    
}
$imgstr=implode(',',$imgrow);

mysql_query("UPDATE multiple_images SET images='".$imgstr."' WHERE id='".$_REQUEST['imgid']."'") or die(mysql_error());

}
else
{
mysql_query("DELETE images FROM multiple_images WHERE id='".$_REQUEST['imgid']."'") or die(mysql_error());

}
?>







I hope this tutorial is very helpfull for to upload multiple images.












Posted by



at







































3 comments:































        

      









Subscribe to:
Post Comments (Atom)