Upload progress using javascript only

Question

Is it possible to make a upload progress using javascript only? (maybe with some ajax to a server-side code)

Having a form such as

<form method="post" action="upload.html" enctype="multipart/form-data">
<p>Select file to upload: <input type="file" name="selected_file"></p>
<p><input type="submit" value="Upload the file"></p>
<div id="progress"></div>
</form>

I want to display things as upload progress, speed, total size.

I don't want tools for it, I want to understand how it is done without flash, and from scratch.

Similar questions (none from scratch):

Just a brief idea on how it is done and where I could search for resources would be enough. I am just curious about it. — BrunoLM
– BrunoLM, Commented Jul 14, 2010 at 11:53

Voropie · Accepted Answer · 2010-11-06 13:13:49Z

2

HTML5 is your friend. In particular, you should read up on File API specifications of HTML5 (w3.org/TR/FileAPI/). In brief, it's done with the help of FileReader interface. Googling might suggest a read such as this one at matlus.com/2010/09/html5-file-upload-with-progress/. Also, there are some limits of the API atm and you might want to learn about those from hacks.mozilla.org/2010/06/html5-adoption-stories-box-net-and-html5-drag-and-drop/.

answered Nov 6, 2010 at 13:13

Voropie

2451 gold badge2 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:27:42Z

1

I see now what you mean by "from scratch". I know of no way to do this that doesn't require some server-side fiddling.

If you have access to PHP 5.2 and can install additional modules, I think this is the closest you'll get regarding a step-by-step process:

What's new in PHP V5.2, Part 5: Tracking file upload progress

It requires APC but as I said, there is no "pure" PHP / Ajax solution as far as I know.

This question contains a number of additional interesting resources.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Jul 14, 2010 at 11:53

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Collectives™ on Stack Overflow

Upload progress using javascript only

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related