Multiple File Upload widget with Drag&Drop support for jQuery

Read+Write access

Latest commit to the master branch

Implemented a better workaround for http://bugs.jquery.com/ticket/10723 ...

...while keeping callbacks in order when using the sequentialUploads or limitConcurrentUploads settings.
commit 09814db5c3
blueimp authored
name age message
directory example/ Attach event handlers with .delegate() instead of ... [blueimp]
directory tests/ Added a callback trigger for the submit event. [blueimp]
file .gitignore Initial commit. [blueimp]
file README.md Removed donation section. [blueimp]
file README.txt Removed donation section. [blueimp]
file jquery.fileupload-ui.css Extend jQuery UI element selectors with class name... [blueimp]
file jquery.fileupload-ui.js Attach event handlers with .delegate() instead of ... [blueimp]
file jquery.fileupload.js Implemented a better workaround for http://bugs.jq... [blueimp]
file jquery.iframe-transport.js Fixed AJAX converters from iframe to text, json an... [blueimp]
file pbar-ani.gif Smaller filesize and progress animation now moving... [blueimp]
README.md

jQuery File Upload Plugin

Demo

Demo File Upload

Setup instructions

How to setup the plugin on your website

Features

  • 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.
  • Preview images:
    A preview of image files can be displayed before uploading with browsers supporting the required HTML5 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 Google App Engine (Python, Java), Ruby on Rails, PHP and any other platform that supports HTTP file uploads.

Requirements

The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies. The UI version of the File Upload plugin also requires the jQuery UI Progressbar and Button components as well as the jQuery Templates plugin. These dependencies are marked as optional, as the basic File Upload plugin can be used without them and the UI version of the plugin can be extended to override these dependencies with alternative solutions.

Browser Support (tested versions)

  • Google Chrome - 7.0+
  • Apple Safari - 4.0+
  • Mozilla Firefox - 3.0+
  • Opera - 10.0+
  • Microsoft Internet Explorer 6.0+

Drag & Drop is only supported on Google Chrome, Firefox 4.0+ and Safari 5.0+.
Microsoft Internet Explorer has no support for multiple file selection or upload progress.
Extended browser support information.

License

Released under the MIT license.

Source Code & Download

Documentation & Support



Markdown Cheat Sheet

Format Text

Headers

# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag

Text styles

*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__

*You **can** combine them*

Lists

Unordered

* Item 1
* Item 2
  * Item 2a
  * Item 2b

Ordered

1. Item 1
2. Item 2
3. Item 3
   * Item 3a
   * Item 3b

Miscellaneous

Images

![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)

Links

http://github.com - automatic!
[GitHub](http://github.com)

Blockquotes

As Kanye West said:
> We're living the future so
> the present is our past.

Code Examples in Markdown

Syntax highlighting with GFM

```javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
```

Or, indent your code 4 spaces

Here is a Python code example
without syntax highlighting:

    def foo:
      if not bar:
        return true

Inline code for comments

I think you should use an
`<addr>` element here instead.