SoftwareQuery
Home About Contact

How To Upload Multiple Images Using JQuery

 SoftwareQuery     No comments   


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.



  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to TwitterShare to Facebook
Newer Post Older Post Home

0 comments:

Post a comment

Donate

Translate

Popular Posts

  • How to Make Image Upload Code Using AJAX
    Direct Copy Paste PHP File  Image Upload Code -   <html> <head> <meta charset="utf-8"> <meta http-equi...
  • Best Useful Free Plugin to Make Wordpress Theme
    Meta Slider   - Meta Slider is that the initial free possibility on today’s list. A premium version is additionally obtainable...
  • How To Install Magento on Localhost XAMPP OR WAMP SERVER
      Step-1 => Make Sure you have to install Latest Version of  Xampp server or Wamp server in your PC.   Step -2 => Go to Web Bro...
  • How To Intall Node.js Via Command On Window And Linux.
    Step-1 . Firstly We have to go official website of https://nodejs.org/en/ then download the latest version of Nodejs zi...
  • How to Set up Amazon Affiliate Marketing Account to Earn Money
    Amazon Associates is a  marketing of Amazon company. It is allowed to youtube channel owner, Social Media pages owner and any type...
  • How To Create Custom Pagination In WordPress
    Hello, Friend's in this post we are creating a custom code of Pagination in WordPress. It is very easy to put this code any custom...
  • How To Scrape Data From Website Url Using Php.
    Q. why using a Scraping. If we want to get data of another website then using web scraping. It is using a PHP HTML Dom parser library ...
  • How To Install Wordpress in Xampp Server And Wamp Server
      Step 1st  -      Install WampServer or Xampp Server.                                                                               ...
  • How to create facebook share and like button for webpage
    Step-1 . Go to web browser type google and write facebook sharing button click this URL or open this URL.                     Ref URL:...
  • How to create Database Connection with ENCRYPT Password in Php
    <?php  $username = $_POST['username'];   $email = $_POST['email'];  $psw = password_hash($_POST['psw'], PA...

Home

This blog Is very help full for beginner coder,if you want to learn new things definitely this Blog is very
helpful for you guys.

Followers

Contact form

Name

Email *

Message *

Blog

  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Contact Us
  • Terms&Conditions

NewsLetter

Copyright © SoftwareQuery | Powered by softwarequery
Design by ShubhamTiwari | Theme by softwarequery.com | Distributed By softwarequery/