Upload Images Using JS

I recently needed to update a form to update through AJAX so the page didn’t reload when submitted. The issue was that we had some images on this form. In the past I have used things like plupload, but that didn’t seem like the right approach in this instance.

At first I looked into the “fetch” api and saw a good post from Tania Rascia, but unfortunately the fetch API still isn’t fully adopted…DAMN YOU MICROSOFT!

Thankfully I was able to find a jQuery version of this same idea over on Makeitweb.com by Yogesh Singh.

I also needed to make sure I sent along post data with the FormData to update the rest of the form. Here is an example of the JS code I ended up using:

On the server script you can access this data just like any other form submission.


There we go! Now we can submit our form, including images, to our server script!

NOTE: We are using a custom function to serialize our form data. You can find that function here.