Dynamically Upload Multiple Images Using PHP and jQuery

by
Dynamically Upload Multiple Images Using PHP and jQuery

Dynamically Upload Multiple Images Using PHP and jQuery

In this Post We Will Explain About is Dynamically Upload Multiple Images Using PHP and jQuery With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to upload multiple images in php using jqueryExample

In this post we will show you Best way to implement multiple image upload php, hear for upload multiple images in php mysqlwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Upload multiple images using jQuery, Ajax and PHP

First of all click on insert images. and then Attech multiple images at the same time.as well as images coulde be of any size Like as a multiple file upload in php code examples.

$tmp_name){
					$temp = $_FILES["files"]["tmp_name"][$key];
					$name = $_FILES["files"]["name"][$key];
					$title = $_POST["title"][$key];
					$desc = $_POST["desc"][$key];
					
					$data_insert = "INSERT INTO `mult_img` (`id`, `title`, `desc`, `img_name`, `status`) VALUES (NULL, '$title', '$desc', '$name', '1')";
					$sql_content_res=mysql_query($data_insert);
					
					if(empty($temp))
					{
						break;
					}
					
					$counter++;
					$UploadOk = true;
					
					if($_FILES["files"]["size"][$key] > $totalBytes)
					{
						$UploadOk = false;
						array_push($errors, $name." file size is larger than the 1 MB.");
					}
					
					$ext = pathinfo($name, PATHINFO_EXTENSION);
					if(in_array($ext, $extension) == false){
						$UploadOk = false;
						array_push($errors, $name." is invalid file type.");
					}
					
					if(file_exists($UploadFolder."/".$name) == true){
						$UploadOk = false;
						array_push($errors, $name." file is already exist.");
					}
					
					if($UploadOk == true){
					
						//compress_image($temp, $UploadFolder."/".$name, 80);
						
						$dest_photo = $UploadFolder."/".$name;
						//$d = compress_image($temp, $dest_photo, 60);
						move_uploaded_file($temp,$UploadFolder."/".$name);
						array_push($uploadedFiles, $name);
					}
				}
				
				if($counter>0){
					if(count($errors)>0)
					{
						//echo "Errors:";
						echo "
    ";
						foreach($errors as $error)
						{
							echo "
  • ".$error."
    • ";
						}
						echo "

";
					}
					
					if(count($uploadedFiles)>0){
						//echo "Uploaded Files:";
						echo "
    ";
						foreach($uploadedFiles as $fileName)
						{
							//echo "
  • ".$fileName."
    • ";
						}
						echo "

";
						
						//echo count($uploadedFiles)." file(s) are successfully uploaded.";
					}								
				}
				else{
					echo "Please, Select file(s) to upload.";
				}
			header('Location: index.php');
			}
			
			

		?>

Upload multiple images with Jquery and PHP

Once atteached, it should be automatically resized 2 mb without altering the acpect ratio or loosing much quality.




  Multiple Images upload example
  
  
  
  
  
  
  .fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}
.img{
    cursor:zoom-in;
    cursor:-webkit-zoom-in;
    cursor:-moz-zoom-in;
    width:100px;
	
}
.img-zoom {
    width: 170px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
 
.transition {
    -webkit-transform: scale(3); 
    -moz-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
	
}
  





  
Multiple Images upload example





	

	  

		
		

		  

			 Insert Images
			
		  

		

	  

	





 
   




  I have read and agree to the Terms and Conditions and Privacy Policy

Dynamic jQuery Image Gallery with Uploader

a logo watermark is automatically applyied to each photos.once atteached and resized, the photos title and descriptions coulde be enterd here.


<?php
$i = 0;
		$sql_content="select * from mult_img where status=1";
	$result=mysql_query($sql_content);
while($row = mysql_fetch_array($result)){
    $i++;
    //if this is first value in row, create new row
    if ($i % 2 == 1) {
        echo "";
    }
	 echo "";
    echo "";
	echo "";
	echo "";
	
    //if this is third value in row, end row
    if ($i % 2 == 0) {
        echo "";
    }
}
//if the counter is not divisible by 3, we have an open row
$spacercells = 2 - ($i % 2);
if ($spacercells < 2) {
    for ($j=1; $j<=$spacercells; $j++) {
		 // echo "";
        // echo "";
		// echo "";
		echo "";
    }
    echo "";
}
?>



Title :".$row['title']."Desc :".$row['desc']."Edit | Delete
".$row['title']."".$row['desc']."

How Multiple Upload Image Use jQuery File Upload

and then Once atteached , the photos are to be edited or deleted.




		

			

				
				Titile
				Description
				Action
			
	

			

				 <img class='imageThumb' src="UploadFolder/" />
				Title : <input type="text" name="mytitle" class="form-control" value="" />
				Description : 
				 
				<a href="index.php?did=" class="btn btn-warning">Delete
				<input type="hidden" value="" name="hid"/>

Javascript client-side compression of images


$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $(""+
			""+
			"
"+
			"Dynamically Upload Multiple Images Using PHP and jQuery" +
			""+
			""+
			""+
			""+
			"" +
			"
").insertAfter("#preview-image");
          $(".remove").click(function(){			  
            $(this).closest("table").remove();
          });          
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
  $(document).ready(function(){
    $('.img-zoom').hover(function() {
        $(this).addClass('transition');
 
    }, function() {
        $(this).removeClass('transition');
    });
  });

Example

I hope you have Got What is how to upload multiple images in php and store in database And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Related posts:

  1. how to upload multiple images in php and store in database?

Leave a Comment