In this post, we are talking about upload multiple images using jquery and PHP and using also HTML or CSS to create some good layout.
Step-1. Firstly we are creating a new folder with any name like ImageUpload then create the upload.php file and copy this code.
<?php
if (isset($_POST['submit'])) {
$j = 0;
$target_path = "uploads/";
for ($i = 0; $i < count($_FILES['file']['name']); $i++) {
$validextensions = array("jpeg", "jpg", "png");
$ext = explode('.', basename($_FILES['file']['name'][$i]));
$file_extension = end($ext);
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext) - 1];
$j = $j + 1;
if (($_FILES["file"]["size"][$i] < 1000000 )
&& in_array($file_extension, $validextensions)) {
if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
echo $j. ').<span id="noerror">Image uploaded successfully!.</span><br/><br/>';
} else {
echo $j. ').<span id="error">please try again!.</span><br/><br/>';
}
} else {
echo $j. ').<span id="error">***Invalid file Size or Type***</span><br/><br/>';
}
}
}
?>
Step-2. After complete upload.php page, we are creating another page multiupload.php page and copy this code.
<!DOCTYPE html>
<html>
<head>
<title>Softwarequery.com-How To Upload Multiple Images Using JQuery</title>
<!-------Including jQuery from google------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
<!-------Including CSS File------>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="maindiv">
<div id="formdiv">
<form enctype="multipart/form-data" action="" method="post">
<h2>Softwarequery.com</h2>
<hr/>
<div id="filediv"><input name="file[]" type="file" id="file"/></div><br/>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
</form>
<br/>
<br/>
<!-------Including PHP Script here------>
<?php include "upload.php"; ?>
</div>
<!-- Right side div -->
</a>
</div>
</div>
</body>
</html>
Step-3. After finished multiupload.php page we are create new folder with name upload inside the ImageUpload folder upload folder using as a save your images.
Step-4. We are creating a script.js file then copy this script inside the file.
<script>
var abc = 0;
$(document).ready(function() {
$('#add_more').click(function() {
$(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'file[]', type: 'file', id: 'file'}),
$("<br/><br/>")
));
});
$('body').on('change', '#file', function(){
if (this.files && this.files[0]) {
abc += 1; //increementing global variable by 1
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd"+ abc).append($("<img/>", {id: 'img', src: 'x.png', alt: 'delete'}).click(function() {
$(this).parent().parent().remove();
}));
}
});
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name)
{
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});
</script>
Step-5. After script file we are create a style.css file.
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
form{
background-color:white;
}
#maindiv{
width:960px;
margin:10px auto;
padding:10px;
font-family: 'Droid Sans', sans-serif;
}
#formdiv{
width:500px;
float:left;
text-align: center;
}
form{
padding: 40px 20px;
box-shadow: 0px 0px 10px;
border-radius: 2px;
}
h2{
margin-left: 30px;
}
.upload{
background-color:#ff0000;
border:1px solid #ff0000;
color:#fff;
border-radius:5px;
padding:10px;
text-shadow:1px 1px 0px green;
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
.upload:hover{
cursor:pointer;
background:#c20b0b;
border:1px solid #c20b0b;
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}
#file{
color:green;
padding:5px; border:1px dashed #123456;
background-color: #f9ffe5;
}
#upload{
margin-left: 45px;
}
#noerror{
color:green;
text-align: left;
}
#error{
color:red;
text-align: left;
}
#img{
width: 17px;
border: none;
height:17px;
margin-left: -20px;
margin-bottom: 91px;
}
.abcd{
text-align: center;
}
.abcd img{
height:100px;
width:100px;
padding: 5px;
border: 1px solid rgb(232, 222, 189);
}
b{
color:red;
}
#formget{
float:right;
}
Step-6. After making all file run your code localhost or serve then see this type of output.
0 comments:
Post a Comment