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:  How to Auto Calculate form field in Javascript?



  <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:  VueJS setTimeout() Function Examples

<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.

<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

Read Also:  Fixed Position Elements in CSS Examples

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.