Hello Reader's!Sometime you need to Upload multiple image in directory ,so in this blog I have wrote and explain jquery and PHP to upload multiple images at once. You can use this as a reference for your web projects, specially focused on newbies to understand the procedures of images uploading.
Here is index.html file which contain jQuery library and CSS to handle your requests.
<!DOCTYPE html>
<html>
<head>
<title>Upload Image</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
img {border-width: 0}
* {font-family:'Lucida Grande', sans-serif;}
</style>
<link href="css/upload.css" rel="stylesheet">
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.fileuploadmulti.min.js"></script>
</head>
<body>
<form name="" action="" method="post">
<div id="mulitplefileuploader">Upload</div>
<div id="status"></div>
</form>
<!--Ajex Code-->
<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'>Upload is success</font>");
},
afterUploadAll:function()
{
alert("Images uploaded!!");
},
onError: function(files,status,errMsg)
{
$("#status").html("<font color='red'>Upload is Failed</font>");
}
}
$("#mulitplefileuploader").uploadFile(settings);
});
</script>
</body>
</html>
//This div will be replace with the form and input file field and make some are for drag and drop image.
<div id=mulitplefileuploader>Upload</div>
//Shows status of images and progress of uploading images.
<div id=status></div>
upload.php
File contains post upload process and move files in uploads directory.
<?php
//If directory doesnot exists create it.
$output_dir = "uploads/";
if(isset($_FILES['myfile']))
{
print_r($_FILES['myfile']);die;
$ret = array();
$error =$_FILES['myfile']['error'];
{
if(!is_array($_FILES['myfile']['name'])) //single file
{
$RandomNum = time();
$ImageName = str_replace(' ','-',strtolower($_FILES['myfile']['name']));
$ImageType = $_FILES['myfile']['type']; //"image/png", image/jpeg etc.
$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
{
/* First check directory and error after that check if single file coming then process separate if multiple files handle in loop.*/
$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]; //"image/png", image/jpeg etc.
$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);
}
?>
You can Download file attached Below
I hope you like this please feel free to comment.
0 Comment(s)