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 "<b>Errors:</b>";
						echo "<br /><ul>";
						foreach($errors as $error)
						{
							echo "<li>".$error."</li>";
						}
						echo "</ul><br />";
					}
					
					if(count($uploadedFiles)>0){
						//echo "<b>Uploaded Files:</b>";
						echo "<br /><ul>";
						foreach($uploadedFiles as $fileName)
						{
							//echo "<li>".$fileName."</li>";
						}
						echo "</ul><br />";
						
						//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.

Read Also:  Multiple Image upload preview remove option



  <title>Multiple Images upload example</title>
  
  
  
  
  
  
  .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);
	
}
  



<div class="container">
  <h2><a href="index.php">Multiple Images upload example</a></h2>
<form method="post" enctype="multipart/form-data" name="formUploadFile" action="#">
<div class="form-group">
	<div class="panel-body">
	  <div class="input-group">
		
		<div class="input-group-btn">
		  <div class="fileUpload btn btn-warning">
			<span><i class="glyphicon glyphicon-upload"></i> Insert Images</span>
			
		  </div>
		</div>
	  </div>
	</div>
</div>
<div class="form-group">
 <div id="preview-image"></div>   
</div>
<div class="form-group">
  I have read and agree to the Terms and Conditions and Privacy Policy
</div>
<div class="form-group">
 
</div>
</form>
</div>



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.

Read Also:  jQuery Ajax Upload Multiple Images using PHP

<table class="table">
<form>
<?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 "<tr>";
    }
	 echo "<td><img class='img-zoom' /></td>";
    echo "<td><b>Title :</b>".$row['title']."</td>";
	echo "<td><b>Desc :</b>".$row['desc']."</td>";
	echo "<td><a class='btn btn-primary'>Edit</a> | <a class='btn btn-warning'>Delete</a></td>";
	
    //if this is third value in row, end row
    if ($i % 2 == 0) {
        echo "</tr>";
    }
}
//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 "<td><img class='imageThumb' /></td>";
        // echo "<td>".$row['title']."</td>";
		// echo "<td>".$row['desc']."</td>";
		echo "<td></td>";
    }
    echo "</tr>";
}
?>
</form>
</table>

How Multiple Upload Image Use jQuery File Upload

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

Read Also:  Pure CSS Add active class to hover effects

<form method="post" enctype="multipart/form-data" name="formUploadFile" action="#">


		<table class="table">
			<tr>
				<td></td>
				<td>Titile</td>
				<td>Description</td>
				<td>Action</td>
			</tr>	

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

	
		</table>
</form>

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;
          $("<table class="table pip">"+
			"<tr><td>"+
			"<img class="imageThumb" src="" title="" />" +
			"</td><td>"+
			""+
			"<textarea name="desc[]" class="form-control"></textarea>"+
			"</td><td>"+
			"" +
			"</td></tr>"+
			"</table>").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 FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel Increase Website Speed performance optimization
  2. Read Also:  Get Gravatar Image Using PHP Example
  3. Read Also:  Star Rating System using jQuery
  4. Read Also:  Rating Stars with simple jQuery
  5. Read Also:  vuejs filter 2 decimal places
  6. Read Also:  PHP Jquery Ajax Upload Multiple Images with Preview
  7. Read Also:  jQuery Ajax Multiple File Upload Using PHP
  8. Read Also:  Build Push Notification System with PHP & MySQL - notification alert in php mysql
  9. Read Also:  jQuery Ajax File Upload images using PHP MySQLi
  10. Read Also:  PHP and Ajax Asynchronous File Upload using jQuery