Javascript file upload mechanism

Question

I need for users to upload files (mostly images) without leaving the current webpage. What's the best tool, library or mechanism for doing this? I'm using the latest jQuery and Spring webmvc (with JSP), so if there's already a mechanism within them then that's ideal.

It would also be really great to have some kind of progress bar. Does that mean it requires coordination with the server to read the progress (where Spring would have to come into play)? Or is there a mechanism within JavaScript for this?

Answer 1

You should check out Plupload.

Plupload offers a cross-browser JavaScript File uploading API that handles multiple file uploads, client-side progress meters, type filtering and even client-side image resizing and drag-and-drop from the desktop. It achieves all of this by providing backends for Flash, Silverlight, Google Gears, HTML5 and Browserplus and picking the most capable available option.

Its really neat! Here's a link to some of their Demos...

http://www.plupload.com/example_jquery_ui.php

... and a screenshot of the jQuery UI queue widget (it has a progress bar!):

I hope this helps.
Hristo

Answer 2

You should use AJAX on the client side

http://www.webtoolkit.info/ajax-file-upload.html This tutorial covers all client side.

Om the server side This tutorlal covers most of this issue:

http://www.ioncannon.net/programming/975/spring-3-file-upload-example/

Yopu can use jquery as well or any other JS framework.

But the mist important thing is the fact You need to remember that your tag on client side should have.

enctype='multipart/form-data'

property. it means that your request contains muultipart data.

Answer 3

I use uploadify pretty regularly: http://www.uploadify.com/

However it does use flash for the upload mechanism and as a result may create some issues if the user is authenticated.

Answer 4

Uploadify does that trick > http://www.uploadify.com/ All samples are php but you should be able to convert it to your platform.