UploadiFive Documentation (api 说明文档)

2014年10月23号发表于：前端。评论 (0) 热度：10133

Documentation

auto

Input Type Boolean

Default Value true

If set to true, files will automatically upload when added to the queue.

<input type="file" name="file_upload" id="file_upload" /><br />
<a href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>

$(function() {
    $('#file_upload').uploadifive({
        'auto'         : false,
        'uploadScript' : '/uploadifive.php'
    });
});

buttonClass

Input Type String
Default Value Empty String

A class name to add to the UploadiFive button DOM element.

<input type="file" name="file_upload" id="file_upload" />


$(function() {
    $('#file_upload').uploadifive({
        'buttonClass'  : 'someClass',
        'uploadScript' : '/uploadifive.php'
    });
});

buttonText

Input Type String
Default Value 'SELECT FILES'

The text to display inside the browse button. This text is rendered as HTML and may contain tags or HTML entities.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'buttonText'   : 'BROWSE',
        'uploadScript' : '/uploadifive.php'
    });
});

checkScript

Input Type String
Default Value false

The path to the server-side files that checks whether a files with the same name as that being uploaded exists in the destination folder. If the file does not exist, this script should return 0. If the files does exist, the script should return 1.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'checkScript'  : '/check-exists.php',
        'uploadScript' : '/uploadifive.php'
    })
});

dnd

Input Type Boolean
Default Value true

If set to false, drag and drop capabilities will not be enabled.

<style type="text/css">
#queue {
    background-color: #FFF;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    height: 178px;
    margin-bottom: 5px;
    overflow: auto;
    padding: 3px;
    width: 300px;
}
</style>
<div id="queue"></div>
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>

$(function() {
    $('#file_upload').uploadifive({
        'auto'         : false,
        'dnd'          : true,
        'queueID'      : 'queue',
        'uploadScript' : '/uploadifive.php'
    })
});

fileObjName

Input Type String
Default Value Filedata

The name of the file object to use in your server-side script. For example, in PHP, if this option is set to ‘the_files’, you can access the files that have been uploaded using $_FILES['the_files'];

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'fileObjName'      : 'the_files',
        'uploadScript'     : '/uploadifive.php'
    });
});

fileSizeLimit

Input Type String

The maximum upload size allowed in KB. This option also accepts a unit. If using a unit, the value must begin with a number and end in either KB, MB, or GB. Set this option to 0 for no limit.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'fileSizeLimit' : 100,
        'uploadScript'  : '/uploadifive.php'
    });
});

fileType

Input Type String
Default Value false

This has been changed/updated in version 1.2.2.

The type of files allowed for upload. This is taken from the file’s mime type. To allow all images, set this option to ‘image/*’. To allow a specific type of image, set this option to ‘image/png’. To allow all files, set this value to false. To accept a set of files with different MIME types, separate each with a pipe “|” character. For a complete list of MIME types, please visit Media Types at iana.org.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'fileType'     : 'image/*',
        'uploadScript' : '/uploadifive.php'
    });
});

formData

Input Type JSON Object
Default Value Empty Object

A JSON object containing additional data to send to the server-side upload script. Data sent via this option will be sent via the headers and can be accessed via the $_POST array (if using the ‘post’ method). So if you send something like {‘someKey’ : ‘someValue’}, then you can access it as $_POST['someKey'].

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'formData'         : {'someKey' : 'someValue'},
        'uploadScript'     : '/uploadifive.php',
        'onUploadComplete' : function(file, data) {
            alert(data);
        }
    });
});

height

Input Type Number
Default Value 30

The height of the browse button in pixels.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'height'       : 50,
        'uploadScript' : '/uploadifive.php'
    });
});

itemTemplate

Input Type String
Default Value [HTML String]

The itemTemplate option allows you to specify a special HTML template for each item that is added to the queue.

The outtermost item element MUST have the class “uploadifive-queue-item” as the code uses this class to perform various tasks.

In UploadiFive, the following classes have special behavior in the queue item template:

.filename – The file name will be inserted in this element
.close – Cancel / close behavior will be added to the onClick for this element
.fileinfo – Upload status or percentage will display in this element
.progress-bar – This element’s width will be updated on upload progress

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'itemTemplate' : '<div class="uploadifive-queue-item"><span class="filename"></span> | <span class="fileinfo"></span><div class="close"></div></div>'
        'uploadScript' : '/uploadifive.php'
    });
});

method

Input Type String
Default Value 'post'

The type of method to use when submitting the form. If set to ’get’, the formData values are sent via the querystring. If set to ‘post’, the fromData values are sent via the headers.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'method'       : 'get',
        'uploadScript' : '/uploadifive.php'
    });
});

multi

Input Type Boolean
Default Value true

Whether or not to allow multiple file selection in the browse dialog window. Setting to true will allow multiple file selection. This does not affect the amount of files that can be added tot he queue. To limit the queue size to 1, use the queueSizeLimit option.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'multi'        : false,
        'uploadScript' : '/uploadifive.php'
    });
});

overrideEvents

Input Type JSON Array
Default Value Empty Array

An array of event names to override the default scripts of. Check the details of each event to see whether it can be overridden.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'overrideEvents' : ['onProgress'],
        'uploadScript'   : '/uploadifive.php'
    });
});

queueID

Input Type String
Default Value false

The ID of the element you want to use as a file queue. This element will also act as the drop target for files if dnd is set to true. If the value is set to false, a queue will be created and an ID will be assigned to it.

<div id="some-queue"></div>
<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'queueID'      : 'some-queue',
        'uploadScript' : '/uploadifive.php'
    });
});

queueSizeLimit

Input Type Number

The maximum number of files you can have in the queue at one time. This does not affect the amount of files that may be uploaded. To set the amount of files you may upload, use the uploadLimit option. Set to 0 to set the limit to unlimited.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'queueSizeLimit' : 2,
        'uploadScript'   : '/uploadifive.php'
    });
});

removeCompleted

Input Type Boolean
Default Value false

Whether or not to remove items that have completed uploading from the queue.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'removeCompleted' : true,
        'uploadScript'    : '/uploadifive.php'
    });
});

simUploadLimit

Input Type Number

The number of files that can be simultaneously uploaded at any given time. Set to 0 to remove the limit.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'simUploadLimit' : 2,
        'uploadScript'   : '/uploadifive.php'
    });
});

truncateLength

Input Type Number

The number of characters at which to truncate the file name in the queue. Set to 0 to never truncate.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'truncateLength' : 5,
        'uploadScript'   : '/uploadifive.php'
    });
});

uploadLimit

Input Type Number

The maximum number of files that may be uploaded. Set to 0 to remove any limit. This does not affect the number of files that may be added to the queue. For that, use the queueSizeLimit option.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'uploadLimit'  : 3,
        'uploadScript' : '/uploadifive.php'
    });
});

uploadScript

Input Type String
Default Value 'uploadifive.php'
Required Yes

The path to the script that will process the uploaded file. And example file is included in the download package (uploadifive.php).

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
    });
});

width

Input Type Number
Default Value 100

The width of the browse button in pixels.

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php',
        'width'        : 200
    });
});

onAddQueueItem

Input Type function
Overridable N/A

Triggered when a new item is added to the queue. This is triggered whether or not the file item returns an error.

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript'   : '/uploadifive.php',
        'onAddQueueItem' : function(file) {
            alert('The file ' + file.name + ' was added to the queue!');
        }
    });
});

onCancel

Input Type function
Overridable N/A

Triggered when a file is cancelled / removed from the queue.

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php',
        'onCancel'     : function() {
            alert('The file ' + file.name + ' was cancelled!');
        }
    });
});

onCheck

Input Type function
Overridable N/A

Triggered after a file is checked against existing files in the destination folder. Only triggered if the onCheck option is not set to false.

Arguments

file
The file object being checked
fileExists
(true or false) Whether or not the file name exists in the destination folder

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'checkScript'  : '/check-exists.php',
        'uploadScript' : '/uploadifive.php',
        'onCheck'      : function(file, exists) {
            if (exists) {
                alert('The file ' + file.name + ' exists on the server.');
            }
        }
    });
});

onClearQueue

Input Type function

Triggered when the queue is cleared using the ‘clearQueue‘ method.

Arguments

queue
The jQuerified DOM element of the file queue.

<input type="file" name="file_upload" id="file_upload" />
<div id="file_queue"></div>

$(function() {
    $('#file_upload').uploadifive({
        'queueID'      : 'file_queue',
        'uploadScript' : '/uploadifive.php'
        'onClearQueue' : function(queue) {
            queue.css('border', '2px solid #F00');
        }
    });
});

onDestroy

Input Type function

Triggered when the UploadiFive instance is destroyed using the destroymethod.

Arguments

No arguments are passed to this event.

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php',
        'onDestroy'    : function() {
            alert('Oh noes!  you destroyed UploadiFive!');
        }
    });
});

onDrop

Input Type function

Triggered when a file is dropped onto the file queue.

Arguments

files
An object containing the file objects dropped onto the file queue.
fileDropCount
The number of files dropped onto the queue

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
        'onDrop'       : function(file, fileDropCount) {
            alert(fileDropCount + ' files were dropped onto the queue.');
        }
    });
});

onError

Input Type function
Overridable N/A

Triggered when an error occurs either adding a file to the queue or uploading a file.

Arguments

errorType
One of several types of error codes including: QUEUE_LIMIT_EXCEEDED, UPLOAD_LIMIT_EXCEEDED, FILE_SIZE_LIMIT_EXCEEDED, FORBIDDEN_FILE_TYPE, and 404_FILE_NOT_FOUND
file / filesToUpload
Depending on the error code, the second argument will hold either a null value, the file object being uploaded (FILE_SIZE_LIMIT_EXCEEDED, FORBIDDEN_FILE_TYPE, 404_FILE_NOT_FOUND) or a collection of files that need to be uploaded (UPLOAD_LIMIT_EXCEEDED).

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
        'onError'      : function(errorType) {
            alert('The error was: ' + errorType);
        }
    });
});

onFallback

Input Type function

Triggered during initialization if the browser does not have compatible HTML5 file API capabilities.

Arguments

No arguments are passed to this event.

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
        'onFallback'   : function() {
            alert('Oops!  You have to use the non-HTML5 file uploader.');
        }
    });
});

onInit

Input Type function

Triggered at the end of the initialization phase.

Arguments

No arguments are passed to this event.

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
        'onInit'       : function() {
            alert('Add files to the queue to start uploading.');
        }
    });
});

onProgress

Input Type function
Overridable N/A

Triggered every time a file upload has a progress update.

Arguments

file
The file being uploaded
event
The event object with details about the progress update
- lengthComputable
  Boolean telling whether the length of the file is computable
- loaded
  The number of btyes loaded
- total
  The total number of bytes to be loaded

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
        'onProgress'   : function(file, e) {
            if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
            }
            file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
            file.queueItem.find('.progress-bar').css('width', percent + '%');
        }
    });
});

onQueueComplete

Input Type function

Triggered when all files in the queue have completed uploading.

Arguments

uploads
An object containing details about the uploads
- attempts
  The number of file uploads attempted in the last upload operation
- successful
  The number of successful file uploads in the last upload operation
- errors
  The number of file uploads that returned an error in the last upload operation
- count
  The total number of files uploaded from this instance of UploadiFive

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript'    : '/uploadifive.php'
        'onQueueComplete' : function(uploads) {
            alert(uploads.successful + ' files were uploaded successfully.');
        }
    });
});

onSelect

Input Type function

Triggered once for every file that is selected whether it returns and error or not.

Arguments

queue
An object containing information about the queue
- cancelled
  The number of files cancelled (not replaced)
- count
  The total number of files in the queue
- errors
  The number of files that returned an error
- queued
  The number of files added to the queue
- replaced
  The number of files replaced
- selected
  The number of files selected

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
        'onSelect' : function(queue) {
            alert(queue.queued + ' files were added to the queue.');
        }
    });
});

onUpload

Input Type function

Triggered once during an upload operation that was called with the uploadmethod.

Arguments

filesToUpload
The number of files that need to be uploaded.

	
<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
        'onUpload'     : function(filesToUpload) {
            alert(filesToUpload + ' files will be uploaded.');
        }
    });
});

onUploadComplete

Input Type function
Overridable N/A

Triggered once for each file upload that completes.

Arguments

file
The file object that was uploaded
data
The data returned from the server-side upload script (echoed in uploadifive.php)

<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $('#file_upload').uploadifive({
        'uploadScript'     : '/uploadifive.php'
        'onUploadComplete' : function(file, data) {
            alert('The file ' + file.name + ' uploaded successfully.');
        }
    });
});

onUploadFile

Input Type function
Overridable N/A

Triggered once for every file upload that starts.

Arguments

file
The file object being uploaded.

<input type="file" name="file_upload" id="file_upload" />
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
        'onUploadFile' : function(file) {
            alert('The file ' + file.name + ' is being uploaded.');
        }
    });
});

cancel

Method Call 'cancel'

Cancel a file upload and remove the item from the queue.

Arguments

file
The file object to be cancelled
fast
Boolean stating whether to remove the file queue item immediately or fade it out

<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadifive('cancel', $('.uploadifive-queue-item').first().data('file'))">Cancel the First File</a> | <a href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>

$(function() {
    $('#file_upload').uploadifive({
        'auto'         : false,
        'uploadScript' : '/uploadifive.php'
    });
});

clearQueue

Method Call 'clearQueue'

Remove all items from the file queue.

Arguments

No arguments can be passed to this method.

<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadifive('clearQueue')">Clear Queue</a> | <a href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>

$(function() {
    $('#file_upload').uploadifive({
        'auto'         : false,
        'uploadScript' : '/uploadifive.php'
    });
});

debug

Method Call 'debug'

Print details about the UploadiFive object in the console.

Arguments

No arguments can be passed to this method.

<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadifive('debug')">Debug</a>
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
    });
});

destroy

Method Call 'destroy'

Destroy the UploadiFive instance and return the file input to its original state.

Arguments

No arguments are passed to this method.

<input type="file" name="file_upload" id="file_upload" /><br />
<a href="javascript:$('#file_upload').uploadifive('destroy')">Destroy</a>
$(function() {
    $('#file_upload').uploadifive({
        'uploadScript' : '/uploadifive.php'
    });
});

upload

Method Call 'upload'

Upload the files in the queue or just a specific file. Each queue item has the file object stored in the ‘file’ property of the item’s jQuery data object.

Arguments

file
If a file is passed as the first argument, only that specific file will be uploaded.

<input type="file" name="file_upload" id="file_upload" /><br />
<a href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>

$(function() {
    $('#file_upload').uploadifive({
        'auto'         : false,
        'uploadScript' : '/uploadifive.php'
    });
});

(｡･v･｡)

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

爱程序，爱分享。

UploadiFive Documentation (api 说明文档)

最新文章

热点文章

标签