PHP JQuery Ajax Image Upload Example Tutorial

By Hardik Savani May 14, 2024 Category : PHP jQuery Ajax

Today i am going to share with you how to make simple jquery ajax image upload with bootstrap example in PHP project.

We generally require to make image upload function on our web application project. If you use only core php, then you can make simply image upload by page refresh. But if you want to make using jquery ajax, it best idea. Using jquery ajax image upload looks good and it can done without page refresh. In ths post i am going to share with you how to create image uploading using jquery very easy way.

In this example we will use jquery.form.js plugin for ajax image upload. jquery.form.js provide very easy and simple way to fire ajax as like you work with code php. So you can make just follow three step and get basic example of ajax image upload. After complete this example, you will find preview as like bellow:

Preview:

Step 1: Create index.php file

In first step, we have to create index.php file. in this file we use bootstrap, jquery and form jquery. So let's create index.php file on your root directory and put bellow code:

index.php 

<!DOCTYPE html>
<html>
<head>
    <title>Upload image using ajax in php example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
</head>
<body>

<div class="container">
    <h2>PHP - Jquery Ajax Image uploading Example</h2>
    <div class="panel panel-primary">
      <div class="panel-heading">Ajax Image upload jquery php example</div>
      <div class="panel-body">

          <form action="imageUpload.php" enctype="multipart/form-data" class="form-horizontal" method="post">
            <div class="preview"></div>
            <input type="file" name="image" class="form-control" style="width:30%" />
            <br/>
            <button class="btn btn-success upload-image">Image Upload</button>
          </form>

      </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".upload-image").click(function(){
            $(".form-horizontal").ajaxForm({target: '.preview'}).submit();
        });
    }); 
</script>

</body>
</html>

Step 2: Create imageUpload.php file

In second step, we need to create imageUpload.php file, in this file we write code for image upload of code php. So, let's create imageUpload.php file on your root directory and put bellow code:

imageUpload.php

<?php

if(isset($_POST) && !empty($_FILES['image']['name'])){

   $name = $_FILES['image']['name'];
   list($txt, $ext) = explode(".", $name);
   $image_name = time().".".$ext;
   $tmp = $_FILES['image']['tmp_name'];

   if(move_uploaded_file($tmp, 'uploads/'.$image_name)){
      echo "<img width='300px' src='uploads/".$image_name."' class='preview'>";
   }else{
      echo "image uploading failed";
   }
}else{
   echo "Please select image";
}

?>

Read Also: Crop, Resize, Frames etc on Selected Image in PHP using Aviary

Step 3: Create uploads folder

In last step, we need to create "uploads" directory to store image. So let's create "uploads" folder on your root directory.

Ok, now we are ready to run our example. So let's run bellow command on your root directory for quick run:

php -S localhost:8000

Now you can open bellow URL on your browser:

Read Also: How to Create Zip Folder and Download in PHP?
http://localhost:8000/

I hope it can help you...

Tags :
Previous

How to Create Custom Scrollbar using JQuery?
Next

Laravel 5 - How to create API Authentication using Passport ?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares