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
So thats all for this PHP Upload Image Tutorial friends. Feel free to leave your comments if having any troubles or confusions. Thank You 🙂
Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.
simple clean well commented code
Thank You keep visiting
hello friend i i am working on a project in myeclipse phone-gap mobile application and i am adding a people’s data in database. all data are added but image data are not added. can u help me to upload the image and store the img path in database
thank u
Hi,
Thanks for the simplified solution.
Am getting an error “Warning: move_uploaded_file(uploads/drawing.jpg): failed to open
stream: No such file or directory in C:\wamp\www\imageUploadTest\imageUpload\Example\upload.php on line 18″
It is working fine when I downloaded the application to /www folder.
Why such an error.
Thanks for this code…
I implemeted this code to edit image from database.. this code worked for uploading image into folder but, for updating image from database, it sent null into image coloum. How to fix it?
You need to store the path of the image in database and show it anywhere in php pages as required.
thank you 🙂
Thanks belal.
I need comments box in php for project with coding plz help me.
hello, i have use your tutorial “Ajaxifying our PHP Upload Image Project” but if I want passed variable as array from php to JS it is possible? I’m trying with dataType ‘json’ but it does not work.. can you tell me please what should change? Thank you
I love Your Work.