FileUp

Upload HTML 5 is a library for uploading files to the server.
Supports multiple file selection, drag&drop and progress bar for jQuery.

[DEMO]

Documentation

1. Events

• onSelect (file)
• onRemove (file_number, total, file)
• onBeforeStart (file_number, xhr, file)
• onStart (file_number, file)
• onProgress (file_number, ProgressEvent, file)
• onSuccess (file_number, response, file)
• onError (event, file, file_number, response)
• onAbort (file_number, file)
• onTimeout (file_number, file)
• onFinish (file_number, file)
• onDragEnter (event)
• onDragOver (event)
• onDragLeave (event)
• onDragEnd (event)

System events

• onStartSystem (file_number, file)
• onSuccessSystem (file_number, file)
• onErrorSystem (event, file, file_number)
• onAbortSystem (file_number, file)
• onTimeoutSystem (file_number, file)

2. Options

• url: window.location.pathname + window.location.search,
• inputID: '',
• queueID: '',
• dropzoneID: '',
• files: [],
• fieldName: 'filedata',
• extraFields: {},
• lang: 'en',
• sizeLimit: 0,
• filesLimit: 0,
• method: 'post',
• timeout: null,
• autostart: false,
• templateFile:

<div id="fileup-[INPUT_ID]-[FILE_NUM]" class="fileup-file [TYPE]"> 
    <div class="fileup-preview"> 
        <img src="[PREVIEW_SRC]" alt="[NAME]"/> 
    </div> 
    <div class="fileup-container"> 
        <div class="fileup-description"> 
            <span class="fileup-name">[NAME]</span> (<span class="fileup-size">[SIZE_HUMAN]</span>) 
        </div> 
        <div class="fileup-controls"> 
            <span class="fileup-remove" onclick="$.fileup(\'[INPUT_ID]\', \'remove\', \'[FILE_NUM]\');" title="[REMOVE]"></span> 
            <span class="fileup-upload" onclick="$.fileup(\'[INPUT_ID]\', \'upload\', \'[FILE_NUM]\');">[UPLOAD]</span> 
            <span class="fileup-abort" onclick="$.fileup(\'[INPUT_ID]\', \'abort\', \'[FILE_NUM]\');" style="display:none">[ABORT]</span> 
        </div> 
        <div class="fileup-result"></div> 
        <div class="fileup-progress"> 
            <div class="fileup-progress-bar"></div> 
        </div> 
    </div> 
    <div class="fileup-clear"></div> 
</div>