AJAX Resize, preview and upload an image with AJAX – Complete example – WebDeveloper.com

Resize, preview and upload an image with AJAX – Complete example
Hello,

I wanted to do an Ajax script to resize and preview and image in an html form. Well, I didn’t find how to do with Ajax, so I had to use php.

The issue is that JavaScript cannot manage a file field to get the selected file and send it via Ajax. The only way to send a file is submitting a form. To not send all data of the form, the file field must be a separate form from the rest of the data. So it can be automatically sent to a php script, which resizes the image, uploads it and then can display it in a iframe without reloading the page.

Then you have the resized image previewed in the form without submitting all data. And then you can send all data with Ajax, including the path of the previously uploaded image, which is stored as a variable in the iframe.

I use one html file and two php scripts, which in total are less than 20 KB.

What do you think about this approach?

Kind regards