Matteo Mattei

Hello, my name is Matteo Mattei and this is my personal website. I am computer engineer with a long experience in Linux system administration and web software development.

linkedin rss twitter google+ github facebook

HTML5 Ajax file upload

Very often I have to write HTML forms for uploading files and since I would like to have something responsive without a full page reload I decided to write a little script as example for the next time I will need something similar. The following example should be compatible with every browser but the actual dynamic part is only available on new browsers that support FormData object from XMLHttpRequest2. Old browsers should be able to upload the files using the old (standard) way with just few changes in the server side part.

The following example creates a form for uploading PDF files (checks at line 34) and show the list of uploaded files inside the <div> element with class result.

The main components of the script are the following:

Remember to apply all needed checks in the PHP server side script.

Please note the TransferCompleteCallback() at line 10 that can be used to get the content of the files once they are transferred. This might be useful for example to directly render uploaded images to the screen without an additional request to the server to get them back.

comments powered by Disqus