Ajax PHP 

PHP with Ajax multiple file upload

Please go through the following steps to implement PHP with Ajax multiple file upload.

Step 1: Create a file called index.php and add below codes

<html>
<head>
<title>AJAX Multi Images Upload in PHP </title>

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (e) {
	$("#imguploadform").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "upload.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data){
			$("#gallery").html(data);
		    },
		  	error: function(){} 	        
	   });
	}));
});
</script>
</head>
<body>
<div class="gallery-bg">
<form id="imguploadform" action="upload.php" method="post">
<div id="gallery"></div>
<div id="uploadFormLayer">
<p class="txt-subtitle">Select Multiple Files:</p>
<p><input name="userImage[]" type="file" multiple/><p><!-- 
<p><input name="userImage[]" type="file"/><p>
<p><input name="userImage[]" type="file"/><p> -->
<p><input type="submit" value="Submit" class="btnUpload" /><p>
</div>
</form>
</div>
</body>
</html>

Step 2: First create folder called “images”, and then create 2nd file  called upload.php

<?php
if(is_array($_FILES)) {
	foreach ($_FILES['userImage']['name'] as $name => $value){
		if(is_uploaded_file($_FILES['userImage']['tmp_name'][$name])) {
		$sourcePath = $_FILES['userImage']['tmp_name'][$name];
		$targetPath = "images/".$_FILES['userImage']['name'][$name];
			if(move_uploaded_file($sourcePath,$targetPath)) {
			
			}
		}
	}
	echo "Upload Successfull";
}
?>

Click here for github file Repository

Arjun is is a web developer/designer, who is fond of the web. He lives in Manipal, Karnataka, India.

Also Read:  How to Create a Secure Login Script in PHP and MySQL

Related posts