Upload Image Using Ajax Without Form in PHP using Vanilla Javascript

In this tutorial, we are going to learn how to upload images using ajax without form in PHP using vanilla javascript. I will guide you through step wise step process on how to upload the image file using pure javascript and not mixed with any jquery or any other.

We are just going to use pure javascript. We are also going to have a progress bar to check if the image has been successfully uploaded.

As bootstrap makes it easy to develop a form without having to keep much effort. I will use bootstrap 4 CDN and integrate it into this sample project to quickly create the form to get started.

Let’s get started and develop features that can upload images using ajax without form.

Create the file structure as shown in the image below:-

How to Upload Image Using Ajax Without Form

What are we going to do?

1. Prepare Elegant HTML form quickly and easily using bootstrap.
2. Uploading an image with javascript with Ajax and PHP.

Making the design Ready

index.php

Uploading an image with javascript with Ajax and PHP.

Add the javascript functions to update the selected image file into the selected box and Ajax code to make requests to the server and send over the image asynchronously.

As we have sent our image file into the server now, we have to write some code in PHP to grab the image file process and upload it to our server.

upload.php

Finally, your file will be uploaded into your root directory inside the /image folder. If you have any other problem regarding uploading images without using form submit in PHP with ajax you can contact us via the contact form on our website. Glad to help.