Simple cross-browser, jQuery/PHP file upload with

Question

I know there are several topics out there about this, but none of them offered a definite solution for a file uploader script that:

1. Works on IE7+
2. Has a progress bar (On every browser)
3. No Flash (Or fallback)

Any solutions?

Answer 1

You may use Axuploader by AlbanX. It has got;

• Multi file upload on all browsers
• Multi file select on html5 browsers (not IE)
• Upload progress information on html5 browsers
• File size information on html5 browsers
• No flash, no Silverlight, on other plugins, only JavaScript
• Support IE 6+, Firefox 2+, Safari 2+, Chrome 1+
• Upload files by chunk, for more performance
• Not dependent by server max post size and max upload file size limits

You may also try Fine-Uploader by Widen. It has got;

• Multiple file select, progress-bar in FF, Chrome, and Safari
• Drag-and-drop file select in FF, Chrome, and Safari (OS X)
• Uploads are cancelable
• No external dependencies at all if using FineUploader or FineUploaderBasic. If using the optional jQuery wrapper, jQuery is of course required.
• FineUploaderBasic only requires the associated Fine Uploader javascript file. All Fine Uploader css and image files can be omitted.
• Doesn't use Flash
• Fully working with HTTPS
• Tested in IE7+, Firefox, Safari (OS X), Chrome, IOS6, and various versions of Android. IE10 is now also supported!
• Ability to upload files as soon as they are selected, or "queue" them for uploading at user's request later
• Display specific error messages from server on upload failure (hover over failed upload item)
• Ability to auto-retry failed uploads
• Option to allow users to manually retry a failed upload
• Create your own file validator and/or use some default validators include with Fine Uploader
• Receive callback at various stages of the upload process
• Send any parameters server-side along with each file.
• Upload directories via drag and drop (Chrome 21+).
• Include parameters in the query string OR the request body.
• Submit files to be uploaded via the API.
• Split up a file into multiple requests (file chunking/partitioning).
• Resume failed/stopped uploads from previous sessions
• Delete uploaded files
• CORS support
• Upload any Blob objects via the API.
• Easily set and enforce a maximum item limit.
• Upload images via paste (Chrome).
• Standalone file & folder drag & drop module. Integrated by default into FineUploader mode.
• Perform async (non-blocking) tasks in callbacks that influence the associated file or files
• Upload images directly from a mobile device's camera
• Retrieve statistics for uploaded files and receive callbacks on status changes
• And many more!

Or jQuery-File-Upload plugin (compatible with IE), which has got;

• Multiple file upload: Allows to select multiple files at once and upload them simultaneously.
• Drag & Drop support: Allows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.
• Upload progress bar: Shows a progress bar indicating the upload progress for individual files and for all uploads combined.
• Cancelable uploads: Individual file uploads can be canceled to stop the upload progress.
• Resumable uploads: Aborted uploads can be resumed with browsers supporting the Blob API.
• Chunked uploads: Large files can be uploaded in smaller chunks with browsers supporting the Blob API.
• Client-side image resizing: Images can be automatically resized on client-side with browsers supporting the required JS APIs.
• Preview images: A preview of image files can be displayed before uploading with browsers supporting the required JS APIs.
• No browser plugins (e.g. Adobe Flash) required: The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
• Graceful fallback for legacy browsers: Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
• HTML file upload form fallback: Shows a standard HTML file upload form if JavaScript is disabled.
• Cross-site file uploads: Supports uploading files to a different domain with Cross-site XMLHttpRequests.
• Multiple plugin instances: Allows to use multiple plugin instances on the same webpage.
• Customizable and extensible: Provides an API to set individual options and define callBack methods for various upload events.
• Multipart and file contents stream uploads: Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload).
• Compatible with any server-side application platform: Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

References

Check out 10 HTML5 File Upload with jQuery Example to see some great file uploaders which works with HTML5

Also, here at 10+ PHP Ajax Upload File Tutorials - Free Download you can choose from a lot of uploaders.

Answer 2

http://www.plupload.com/ is available in multiple runtimes and has graceful degradation. If HTML5 is supported, it can also do drag and drop uploads.

Answer 3

I think the following are the thing you need, they also support progressing upload well in IE by Flash component

• http://yuilibrary.com/yui/docs/uploader/
• http://www.plupload.com/documentation.php

Answer 4

Use This:

http://valums.com/ajax-upload/

No Flash, Simple Jquery.

Features

1. multiple file select, progress-bar in FF, Chrome, Safari
2. drag-and-drop file select in FF, Chrome
3. uploads are cancellable
4. no external dependencies
5. doesn't use Flash
6. fully working with https
7. keyboard support in FF, Chrome, Safari
8. tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;

git: https://github.com/valums/file-uploader

You can also use these:

http://nixboxdesigns.com/demos/jquery-uploadprogress.php

https://github.com/drogus/jquery-upload-progress

http://www.albanx.com/

Flash-less IE progress bar

http://www.webappers.com/2011/01/24/jquery-file-upload-with-upload-progress-bar/

Hope this helps.

Answer 5

To support progress bar and multiple file upload in IE requires Flash. Unfortunately, none of the new, "flashy but flashless" widgets support this.

The only solution I've found is Uploadify, which is not perfect but does the job. The largest draw back is lack of drag and drop support.

Frankly, all of these new widgets are so much better, but the developers sadly seem opposed to implementing a fallback solution in Flash for IE.