Pure JavaScript File Upload Example

Looking for a pure JavaScript file upload example? In this tutorial we demonstrate how to upload a file with JavaScript and HTML5 on the client side and a component on the Apache server that captures the JavaScript file upload and saves the file locally on the server. If you want to avoid jQuery or DOJO and upload files asynchronously to the server, this pure JavaScript file upload example tutorial is exactly what you're looking for.

You can find the code used in this example here:

[kamentabakov]

Can you give a link to all the code used?

[Jon-jnwe]

It doesn't work for me.. i am using the same server and all but it seems like the php file isn't being used at all because when i select the file and upload it it doesn't do anything. same code, same server...Any clue why is that?

[jonnmostovoy]

The alert on 4:49 is misleading. You should report success from ".then" of a promise.

[steveacuin]

I've been looking for a code like this. Better copy the codes from the link, it didn't work for me at first but found out that i had typo errors. Thanks for sharing!

[Evan-Lab]

Not working for me i searched solution since a week to upload a file and i don't find anything

[peberdah]

Great, this is code example in Javascript and PHP that work, even pure Notepad. How to get filename, size of selected file, maybe an animated pure <progress> tag, again plus plus.

[RileyKalbOfficial]

Getting Error 405 Method not allowed warnings. Any fix for this?

[edrspx]

preciso mesmo é enviar múltiplos arquivos.
você tem esse vídeo aqui?

[emmaccode]

close, but no cigar for me. I am struggling to get this file reader event thing to work (rather than using forms :p)
looks like I'm probably going to need to just use the forms.

[craftingnerf]

I tried to do this on my older raspberry pi but I get the error "500 (Internal Server Error)"
its an older raspberry pi I saw on the chip 2011 so it could be its age
either way is there some workaround to this?

[relaxationology]

Can that upload music file and video file?
If not, how can I do it.

[marianomv]

Thanks! I needed to add a simple upload to a "backend-less website". This did the trick effortlessly.

[張紘齊-sk]

I tried the same code but get Uncaught TypeError TypeError: Failed to fetch

[tochukwuokeke]

I tried same code and it didn’t upload it just alerts file has been uploaded successfully, but nothing is in upload folder and there are no errors. Any advise.
I am testing with localhost xampp

[liloolilful]

It does NOT work if you use BLOB or new File .... via javascript :(

[charmilakondayagunta]

Hi friend, just going through this example... Pls correct me if I am wrong.. So if we want to upload a file using javascript Or jquery and using an ajax library, should there be definitely a backend code written to upload file to server.. Is it not possible only through front end???

[MimisK]

It works. Thanks!

Can you give an example of how to handle multiple files?

[errorerror]

But are you SURE it doesn't use jQuery? I don't think you mentioned if it uses jQuery or not so I'm vewwy confewzed

[AshwinSKumar]

You should make a video on how to automatically upload multiple files, that are same filetype to the cloud,

[timdrchslr]

Hello, Is there a maximum file size limitation? I googled a lot but nothing helped... smaller files like pictures are working.