PHP Upload Image Tutorial using jQuery AJAX

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

  • Try running your project (Make sure your server is running). In my case this project will run in localhost/UploadImage
index
index.html
  • As you can see in our form action we have written upload.php so we need to create upload.php

  • Now try running your project.
php upload image
PHP Upload Image Tutorial
  • 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.

  • 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.

  • Now run your project and you will see the following result.
php upload image output
PHP Upload Image – Output
  • 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 🙂

10 thoughts on “PHP Upload Image Tutorial using jQuery AJAX”

  1. 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

    Reply
  2. 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.

    Reply
  3. 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?

    Reply
  4. 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

    Reply

Leave a Comment