How To Upload Multiple Images In PHP

Submitted by alpha_luna on Tuesday, April 19, 2016 - 10:48.
Related Code: Single Image Upload In the previous tutorial, we create a simple Single Image Upload with progress bar. Today, we learn on How To Upload Multiple Images In PHP. This will be easy if you read or follow our previous tutorial in Single Image Upload. In the example, we have 3 input file field in our form tag. And, it will be uploaded using these fields by clicking the button. Input File Field - HTML The HTML form is, 
  1. <center>
  2. 	<div class="container-bg">
  3. 		<form id="uploadForm" action="upload.php" method="post">
  4. 		<div id="container">No Images in Gallery</div>
  5. 			<div id="uploadFormLayer">
  6. 				<p class="txt-subtitle">Upload Multiple Image:</p>
  7. 				<p><input name="uploading_Image[]" type="file" class="inputFile" /><p>
  8. 				<p><input name="uploading_Image[]" type="file" class="inputFile" /><p>
  9. 				<p><input name="uploading_Image[]" type="file" class="inputFile" /><p>
  10. 				<p><input type="submit" value="Submit" class="btnUpload" /><p>
  11. 			</div>
  12. 		</form>
  13. 	</div>
  14. </center>
jQuery Script For Uploading Multiple Image This script will the same for single and multiple image uploading. 
  1. <script src="js/code_js.js" type="text/javascript"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function (e) {
  5. 	$("#formUploading").on('submit',(function(e) {
  6. 		e.preventDefault();
  7. 		$.ajax({
  8.         	url: "upload.php",
  9. 			type: "POST",
  10. 			data:  new FormData(this),
  11. 			contentType: false,
  12.     	    cache: false,
  13. 			processData:false,
  14. 			success: function(data){
  15. 			$("#container").html(data);
  16. 		    },
  17. 		  	error: function(){} 	        
  18. 	   });
  19. 	}));
  20. });
  21. </script>
And, this is the style. 
  1. <style type="text/css">
  2. .container-bg {
  3. 	width: 610px;
  4. 	background-color: #F9D735;
  5. 	border-radius:4px;
  6. }
  7. #container {
  8. 	padding: 10px;
  9. 	text-align:center;
  10. 	font-weight: bold;
  11. 	color: red;
  12. 	background-color: azure;
  13. 	overflow:auto;
  14. 	border:blue 1px solid;
  15. 	border-top-left-radius:4px;
  16. 	border-top-right-radius:4px;
  17. }
  18. #container img {
  19. 	padding: 10px;
  20. }
  21. #formUploadingLayer {
  22. 	padding: 10px;
  23. 	border-bottom-left-radius:4px;
  24. 	border-bottom-right-radius:4px;
  25. 	border:blue 1px solid;
  26. 	background:azure;
  27. 	color:red;
  28. 	font-size:18px;
  29. }
  30. .btnUpload {
  31. 	background-color: azure;
  32. 	padding:5px 20px;
  33. 	border: blue 1px solid;
  34. 	color: red;
  35. 	border-radius:4px;
  36. }
  37. .inputFile {
  38. 	padding: 4px;
  39. 	background-color: azure;
  40. 	border:blue 1px solid;
  41. 	border-radius:4px;
  42. }
  43. .txt-subtitle {
  44. 	font-size:1.2em;
  45. }
  46. </style>
This would be the output: ResultRelated Code: Single Image Upload Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 766 views