August 12, 2018

Multiple Image Upload in php with Database

By admin PHP, Technology 0 Comments

Today, We want to share with you Multiple Image Upload in php with Database.
In this post we will show you PHP Ajax Two or more Image Upload with Preview, hear for Ajax Multiple Pictures Upload in php with Database we will give you demo and example for implement.
In this post, we will learn about php multiple more image upload with preview with an example.

Ajax Multiple Image Upload in php with Database Example

In this PHP Ajax Multiple Image Upload with Preview, We can simple make only two files as there are listed bellow for Multiple Files Upload in php with Database and run this example:

READ : convert JSON format string into Object using AngularJS - angular json

1) index.php
2) multipleUploadFl.php

Index.php

<!DOCTYPE html>
<html>
<head>
  <title>PHP Ajax Multiple Image Upload with Preview Example - infinityknow.com</title>
  <link href="/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="jquery/1.12.4/jquery.min.js"></script>
  <script src="libs/jquery.form/4.2.2/jquery.form.min.js"></script>
  <style type="text/css">
    input[type=file]{
      display: inline;
    }
    #multiple_img_display{
      border: 2px solid black;
      padding: 11px;
    }
    #multiple_img_display img{
      width: 250px;
      padding: 6px;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>PHP Ajax Multiple Image Upload with Preview Example</h1>
  <form action="multipleUploadFl.php" method="post" enctype="multipart/form-data">
      <input type="file" id="multipleUploadFl" name="multipleUploadFl[]" multiple>
      <input type="submit" class="btn btn-success" name='submitImage' value="Upload Image"/>
  </form>
  <br/>
  <div id="multiple_img_display"></div>
</div>
</body>
<script type="text/javascript">
  
  $("#multipleUploadFl").change(function(){
     $('#multiple_img_display').html("");
     var flas_counter=document.getElementById("multipleUploadFl").files.length;
     for(var i=0;i<flas_counter;i++)
     {
      $('#multiple_img_display').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");
     }
  });
  $('form').ajaxForm(function() 
   {
    alert("Multiple File Uploaded SuccessFully");
   }); 
</script>
</html>

multipleUploadFl.php

<?php
if(isset($_POST['submitImage']))
{
	for($i=0;$i<count($_FILES["multipleUploadFl"]["name"]);$i++)
	{
		$uploadfile=$_FILES["multipleUploadFl"]["tmp_name"][$i];
		$myfolder="uploads/";
		move_uploaded_file($_FILES["multipleUploadFl"]["tmp_name"][$i], "$myfolder".$_FILES["multipleUploadFl"]["name"][$i]);
	}
	exit();
}
?>

We hope sure to make “uploads” folder in your main root directory.

READ : Angularjs json stringify - angularjs parse json - angular to Json

jQuery 15 Powerful Tips and Tricks for Developers and Web Designer

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about multiple ajax image upload.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Post Views: 765