



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 .

Step-2 .

Step-3 .

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.











