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 …

php upload image

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

[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 🙂

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.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x