首页 » js ▪ html5

UploadiFive Documentation (api 说明文档)

   发表于:js ▪ html5评论 ()   热度:3006

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群,并关注我们的微博,谢谢支持。