Hello friends, today we will learn to upload image to server using jQuery AJAX. So, Lets begin our PHP Upload Image Tutorial.
What we will use in this PHP Upload Image Tutorial?
- Wamp/Xampp server (I am using windows)
- Notepad++
Creating HTML Form for Image Upload
- First we need an HTML Form from where we can upload image
- So goto the root directory of your server (htdocs for xampp and www for wamp, I am using wamp server)
- Create a new folder for your project (I created UploadImage)
- Here we will create a form. Create a new file named index.html and write the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Upload Image using AJAX</title> <!-- including jquery --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> </head> <body> <!-- Creating a form to upload image --> <form id='uploadImage' action='upload.php' method='post' enctype='multipart/form-data'> <input type='file' name='photo' /> <button>Upload File</button> </form> </body> </html> |
- Try running your project (Make sure your server is running). In my case this project will run in localhost/UploadImage
- As you can see in our form action we have written upload.php so we need to create upload.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php if($_SERVER['REQUEST_METHOD']=='POST'){ //Getting actual file name $name = $_FILES['photo']['name']; //Getting temporary file name stored in php tmp folder $tmp_name = $_FILES['photo']['tmp_name']; //Path to store files on server $path = 'uploads/'; //checking file available or not if(!empty($name)){ //Moving file to temporary location to upload path move_uploaded_file($tmp_name,$path.$name); //Displaying success message echo "Upload successfully"; }else{ //If file not selected displaying a message to choose a file echo "Please choose a file"; } } |
- Now try running your project.
- As you can see my image is uploading in the directory. But this is not the AJAX way, as our web page is getting redirected to upload.php. We need to upload the image without refreshing or redirecting the current page. So for this we will use jQuery AJAX.
Ajaxifying our PHP Upload Image Project
- Create a new file named upload.js and write the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//Adding a submit function to the form $('#uploadImage').submit(function(e){ //Preventing the default behavior of the form //Because of this line the form will do nothing i.e will not refresh or redirect the page e.preventDefault(); //Creating an ajax method $.ajax({ //Getting the url of the uploadphp from action attr of form //this means currently selected element which is our form url: $(this).attr('action'), //For file upload we use post request type: "POST", //Creating data from form data: new FormData(this), //Setting these to false because we are sending a multipart request contentType: false, cache: false, processData: false, success: function(data){ //If the request is successfull we will get the scripts output in data variable //Showing the result in our html element $('#msg').html(data); }, error: function(){} }); }); |
- As you can see inside success we are displaying the result in an html element having id msg. So we need to create an html element with id msg in our html file. And we need to include this js script in our html file.
- So the modified index.html would be.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>Upload Image using AJAX</title> <!-- including jquery --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> </head> <body> <!-- Creating a form to upload image --> <form id='uploadImage' action='upload.php' method='post' enctype='multipart/form-data'> <input type='file' name='photo' /> <button>Upload File</button> </form> <!-- p element with id msg to display success msg --> <p id='msg'></p> <!-- including upload.js script --> <script src='upload.js'></script> </body> </html> |
- Now run your project and you will see the following result.
- You can also download my PHP File Upload Script.
Get this PHP Upload Image Script
[sociallocker id=”1372″] [download id=”1327″]Â [/sociallocker]
So thats all for this PHP Upload Image Tutorial friends. Feel free to leave your comments if having any troubles or confusions. Thank You 🙂
