Basic usage + Add drop zone Cause error on upload Abort upload
Complete analog of the basic sample rewritten using jQuery wrapper.
On AJAX uploads browser reports how much data has been already sent. Firefox won't trigger this event on small files.
IFrame (legacy) uploads don't provide this feature but are still supported.
HTML5-only. When dropped one or more image files generates thumbnails and displays them right on the page, without uploading the data anywhere.
HTML5-only. Drop a (better) text file from your computer to load it into the textarea. Drop zone can be made from any element - fieldset, div or, say, a textarea itself.
Drop one or more text files…
Supported only in Chrome 21+. W3C has a working draft on File System API that introduces lots of interesting features allowing us to read and write files and directories. This sample will non-recursively list all files and folders, also displaying thumbnails of images it finds.
Drop a directory here…
|dragEnter||—||User drags an object into the drop zone (Firefox) or document (Chrome).|
|dragLeave||—||Dragged object has left the drop zone or document.|
|upload||—||Files were dropped or selected using the Browse button.|
|send||—||File info is normalized (cross-browser) and ready to send.|
|iframeDone||—||Server response received after uploading file via iframe.|
|inputSetup||—||A hidden file input is being set up.|
|fileSetup||—||File info is uniformized (Firefox, Chrome only).|
|iframeSetup||—||A file is about to be sent via iframe.|
|xhrSetup||—||An XHR was created to be used to upload a file.|
|xhrSend||—||After xhrSetup, XHR needs to be send().|
|progress||—||Data upload progress, in Firefox only works on large files.|
|error||—||Request has ended with an error|
|done||—||Data has been successfully uploaded.|