How to upload Multiple Image files with jQuery

October 26, 2018

In this post, we are talking about upload multiple images using jquery and PHP and using also HTML or CSS to create a 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.

Step-2. After complete the 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>
  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="script.js"></script>
  
  
        <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/>

Step-3. After finished the multiupload.php page we are creating a 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.

$('#upload').click(function(e) {
        var name = $(":file").val();
        if (!name)
        {
            alert("The first Image Must Be Selected");
            e.preventDefault();
        }
    });
});
</script>

Step-5. After the script file, we are creating 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 files run your code localhost or serve then see this type of output.

In this post, we are talking about upload multiple images using jquery and PHP and using also HTML or CSS to create a good layout.

Comments