Uploading Multiple Images Using PHP and jQuery

Question

I have code below that runs perfectly and uploads multiple images. Its displaying vertically, so i'm trying to make it display Horizontally.

This is the html code

<form enctype="multipart/form-data" action="" method="post">                   
<div id="filediv"><input name="file[]" type="file" id="file"/></div><br/>
 <input type="button" id="add_more" class="upload" value="Add More Files"/>

And this is my Javascript code

$('#add_more').click(function() {
        if (max< 2) {

        $(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
                $("<input/>", {name: 'file[]', type: 'file', id: 'file'}),        
                $("<br/><br/>")
                ));
    max++;
}
  });

My css Code

.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;
}

I expect the output to be displayed Horizontally not displaying vertically like this. enter image description here

Answer 1

Here is a solution: First remember that you can't have multiple tags with the same id therefore I turned filediv to class instead. The same goes for id='file' .

In this solution all the filediv s are put in a files_container that is displayed as flex .

HTML:

<form enctype="multipart/form-data" action="" method="post"></form>
<div id="files_container">
    <div class="filediv">
        <input class="file" name="file[]" type="file">
    </div>
</div>
<input type="button" id="add_more" class="upload" value="Add More Files"/>

And in your CSS make the following additions and changes:

#files_container {
    display:flex;
    justify-content:center;
}
.file{
    color:green;
    padding:5px;
    margin:5px;
    border:1px dashed #123456;
    background-color: #f9ffe5;
}

Finally the Javascript:

$('#add_more').click(function() {
    if (max < 2) {
        $("#files_container").append(
            $("<div>", {'class':'filediv'}).fadeIn('slow').append(
                $("<input>", {'class': 'file', name: 'file[]', type: 'file'})
            )
        );
        max++;
    }
});

Good luck!