jQuery Upload Multiple Images In PHP

Submitted by rinvizle on Wednesday, August 31, 2016 - 11:36.

This tutorial is written in PHP and jQuery. We create this project and named as jQuery Upload Multiple Images In PHP. Every file contains post upload process and move the files in uploads directory. First check directory and error after that check if single file coming then process separate if multiple files handle in loop. You will see all the files that you uploaded in the directory folder. This simple application will bring to you a very big help to your projects and add it to your features to make it more attractive and responsive to every users. See the example code below.

Sample Code

Index.html - This file contains jQuery library and CSS script to handle the requests.

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Upload Multiple Images In PHP</title>
	<link href="css/uploadfilemulti.css" rel="stylesheet">
	<script src="js/jquery-1.8.0.min.js"></script>
	<script src="js/jquery.fileuploadmulti.min.js"></script>
</head>
<body>
<div class="content">
<h2>jQuery Upload Multiple Images In PHP</h2><hr/>
<div id="status"></div>
<div id="mulitplefileuploader">Upload</div>
<script>
$(document).ready(function()
{
var settings = {
	url: "upload.php",
	method: "POST",
	allowedTypes:"jpg,png,gif,doc,pdf,zip",
	fileName: "myfile",
	multiple: true,
	onSuccess:function(files,data,xhr)
	{
		$("#status").html("<font color='green'>Image Upload Successfully</font>");
 
	},
    afterUploadAll:function()
    {
        alert("Image's Uploaded");
    },
	onError: function(files,status,errMsg)
	{		
		$("#status").html("<font color='red'>Image Upload Failed</font>");
	}
}
$("#mulitplefileuploader").uploadFile(settings);
});
</script>
</div>
<div>
	<footer><a href="http://www.sourcecodester.com">Sourcecodester &copy 2016</a></footer>
</div>
</body>
</html>

Upload.php - This file is for the process of uploading the images or files and push it through the directory folder.

<?php
$output_dir = "uploads/";
 
if(isset($_FILES["myfile"]))
{
	$ret = array();
	$error =$_FILES["myfile"]["error"];
   {
    	if(!is_array($_FILES["myfile"]['name']))
    	{
            $RandomNum   = time();
            $ImageName      = str_replace(' ','-',strtolower($_FILES['myfile']['name']));
            $ImageType      = $_FILES['myfile']['type'];        
            $ImageExt = substr($ImageName, strrpos($ImageName, '.'));
            $ImageExt       = str_replace('.','',$ImageExt);
            $ImageName      = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);
            $NewImageName = $ImageName.'-'.$RandomNum.'.'.$ImageExt;
 
       	 	move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $NewImageName);
			$ret[$fileName]= $output_dir.$NewImageName;
    	}
    	else
    	{
            $fileCount = count($_FILES["myfile"]['name']);
    		for($i=0; $i < $fileCount; $i++)
    		{
                $RandomNum   = time();
                $ImageName      = str_replace(' ','-',strtolower($_FILES['myfile']['name'][$i]));
                $ImageType      = $_FILES['myfile']['type'][$i];
 
                $ImageExt = substr($ImageName, strrpos($ImageName, '.'));
                $ImageExt       = str_replace('.','',$ImageExt);
                $ImageName      = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);
                $NewImageName = $ImageName.'-'.$RandomNum.'.'.$ImageExt;
 
                $ret[$NewImageName]= $output_dir.$NewImageName;
    		    move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$NewImageName );
    		}
    	}
    }
    echo json_encode($ret);
}
?>

Hope that you learn in my tutorial. Don't forget to LIKE & SHARE this website. Enjoy Coding.

Add new comment

567 views

jQuery Upload Multiple Images In PHP

Sample Code

Tags

Add new comment