Detailed jquery uploadify File Upload plugin use method _jquery

Source: Internet
Author: User
Tags file upload php download rar relative jquery library

Uploadify This plugin is based on JS inside the jquery library to write. Combined with Ajax and Flash, the implementation of this multi-threaded upload function.

The latest version is now 3.2.1.

Online example

Examples of PHP files used in uploaderdemo.php please download below the page

Introducing Files

    • <link rel= "stylesheet" type= "Text/css" href= "Uploadify.css"/>
    • <script type= "Text/javascript" src= "Jquery.min.js" ></script>
    • <script type= "Text/javascript" src= "Jquery.uploadify.js" ></script>

How to use

 <form> <div id= "queue" ></div> <input id= "file_upload" name= "file_upload" type= "file" multiple= "t Rue "> </form> <div id=" Uploadfiles "></div> <div id=" Filequeue "style=" Clear:both "></
div> <script type= "Text/javascript" > var timestamp = new Date (). GetTime ();
var token = Math.floor (Math.random () * 1000) + timestamp; $ (function () {$ (' #file_upload '). Uploadify ({' ButtonText ': ' Select File ... ', ' fileobjname ': ' Simplefile ', ' method ': ' Post ', ' Multi ': True, ' Queueid ': ' Filequeue ',//' Uploadlimit ': 2, ' filetypeexts ': ' *.gif;*.png;*.jpg;*.bmp;*.jpeg; ', ' Buttonim Age ': '/static/js/uploadify/select.png ', ' formData ': {' timestamp ': timestamp, ' token ': token}, ' swf ': '/static/js/u  ploadify/uploadify.swf ', ' uploader ': '/static/php/uploaderdemo.php ', ' Onuploadstart ': function () {$imgHtml = '  ";
 $ (' #uploadfiles '). Append ($imgHtml); }, ' OnuploadsucCess ': function (file, data, response) {$ ('. Upload_load '). Remove ();
 var json = $.parsejson (data);
 if (json.state = = ' success ') {$imgHtml = ' <span id= ' file_ ' + json.file_id + ' > ';
 $imgHtml + + ' <a href= ' + json.file + ' "target=" _blank ">";
 $imgHtml + + '  ';
 $imgHtml + + "<a href=" javascript:uploadifyremove ("' + Json.file + '") "> Delete </a>;
 $imgHtml + = ' </span> ';
 $ ($imgHtml). Appendto (' #uploadfiles ');
 else {alert (json.message);
 }, ' Onqueuecomplete ': function () {$ ('. Upload_load '). Remove ();
}
 }); 
}); </script>

Parameter description

One, property
Property name Default value Description
Auto True Set to True when the file is selected to upload directly, false need to click the Upload button to upload.
Buttonclass Button style
Buttoncursor ' Hand ' The way the mouse pointer hovers over the button
Buttonimage Null The path to the picture of the browse button.
ButtonText ' SELECT FILES ' The text of the browse button.
Checkexisting False File Upload duplicate check program, check the file will be uploaded on the server side has been existing, there is returned 1, does not exist to return 0
Debug False If set to TRUE indicates debug mode for SWFUpload enabled
Fileobjname ' Filedata ' The name of the file upload object, if named ' The_files ', the PHP program can use $_files[' the_files ' to process the uploaded file object.
Filesizelimit 0

The size limit of the upload file, if the integer is the size of KB, if it is a string, you can use (B, KB, MB, or GB) as a unit, such as ' 2MB ';

If set to 0, it means no limit

Filetypedesc ' All Files ' This property value must be set to the Filetypeexts property before it is valid to set the prompt text in the Select File dialog box, such as setting Filetypedesc as "Please select RAR doc PDF File"
Filetypeexts ‘*.*' Sets the type of file that can be selected, in the format of: ' *.doc;*.pdf;*.rar '.
FormData The additional data submitted to the server at the same time as the JSON format uploads each file can be set dynamically using the ' settings ' method in the ' Onuploadstart ' event.
Height 30 Sets the height of the browse button, the default value
ItemTemplate False To set up an HTML template for an upload queue, you can use the following tags:
ID of the Instanceid–uploadify instance
ID of this file in the fileid– queue, or understand the ID of this task
Name of the filename– file
filesize– the current upload file size
To insert a template label with a format such as: ${filename}
Method Post Submit Method Post or get
Multi True When set to True, multiple files can be uploaded.
Overrideevents Set which events can be overridden, JSON format, such as: ' Overrideevents ': [' onuploadprogress ']
Preventcaching True If true, automatically adds a string of random string parameters each time the file is uploaded, preventing the URL cache from affecting the upload result
Progressdata ' Percentage ' Set upload progress display mode, percentage display upload percentage, speed display upload speed
Queueid False Sets the ID of the upload queue container dom element and, if false, automatically generates a queue container.
Queuesizelimit 999 The maximum number of tasks displayed by the queue, and if the number of files selected exceeds this limit, the Onselecterror event will be set off.
Note This is not the maximum number of file uploads, if you want to limit the maximum number of uploaded files, you should set Uploadlimit.
removecompleted True Whether the completed task is automatically removed from the queue, and if set to False, this task remains displayed.
Removetimeout 3 If you set the task to be automatically removed from the queue when it is finished, you can specify the interval from completion to removal.
Requeueerrors False If set to true, a single task will return an error after the upload fails and rejoin the task queue upload.
Successtimeout 30 When the file is uploaded successfully, the server should return the success flag, and this setting returns the timeout for the result.
Swf ' Uploadify.swf ' The relative path of the uploadify.swf file.
Uploader uploadify.php The relative path of the background handler.
Uploadlimit 999 The maximum number of uploaded files, which will trigger the Onuploaderror event if this limit is reached or exceeded.
Width 120 Sets the width of the file navigation button.

Ii. Events
Event name Description
OnCancel (file)

When you click the Close button in the file queue or click Cancel Upload, the file parameter is the object

Onclearqueue (Queueitemcount) triggered when the function cancel method is invoked, the Queueitemcount parameter is the number of files that are being uploaded.
OnDestroy () triggered when the Destory method is invoked
Ondialogclose (Queuedata)

triggered when the file navigation box is closed, if this event is overridden, the error message prompt does not pop up when a file is added to the queue.

The Queuedata object contains the following properties:

  • filesselected File Selection dialog box How many files are selected by CCP
  • Filesqueued How many files have been added to the queue
  • Filesreplaced How many files have been replaced in the queue
  • How many files filescancelled canceled fileserrored How many files were wrong
Ondialogopen () Start immediately when the File selection dialog pops up, but it may not be fully executed until the File selection dialog box is closed.
Ondisable () Triggered when the Disable method disables the Uploadify upload button when invoked.
Onenable () Triggered when the Disable method enables the Uploadify upload button when invoked.
Onfallback () triggered when the current browser does not support flash during the initialization of Uploadify.
OnInit () Triggered at the end of the first initialization uploadify.
Onqueuecomplete (Queuedata)

The file upload queue is processed and then triggered.

The Queuedata object contains the following properties:

  • uploadssuccessful– upload number of successful files
  • Number of uploadserrored– uploaded failed files
Onselect (file)

When you select a file, each upload task is triggered when you add it to the queue.

Onselecterror (file, errorcode, errormsg)

When you select a file and then add each upload task to the queue, the failure will trigger.

file– File Object

The errorcode– error code is as follows:

  • The number of queue_limit_exceeded– tasks exceeds the queue limit;
  • file_exceeds_size_limit– file size exceeds limit;
  • zero_byte_file– file size is 0
  • invalid_filetype– file type does not meet the requirements

errormsg– error prompts can be customized via ' THIS.QUEUEDATA.ERRORMSG '

Onswfready () Flash file is triggered after successful loading.
Onuploadcomplete (file) Each file will be triggered after it has been uploaded, whether successful or not.
Onuploaderror (file, ErrorCode, ErrorMsg, errorstring) The file is triggered by a wrong trigger, and the parameter is returned by the server-side program.
Onuploadprogress (file, bytesuploaded, Bytestotal, totalbytesuploaded, Totalbytestotal)

This event is triggered multiple times during the process of an upload queue, which is triggered whenever the task status is updated.

  • file– File Object
  • bytesuploaded– the number of bytes that have been uploaded
  • Total bytes of bytestotal– file
  • totalbytesuploaded– The total number of bytes that have been uploaded for all files in the current task queue
  • totalbytestotal– The total number of bytes in the current task queue for all files
Onuploadstart (file) Triggered immediately when the file is about to start uploading
Onuploadsuccess (file, data, response)

Trigger when file upload is successful

  • file– File Object
  • data– the information returned by the service-side output
  • True if response– has output, if no response is false, if returns false, it is assumed to be true when the time of the Successtimeout setting is exceeded

third, the method
Method name Description Application examples
Cancel (Fileid, suppressevent)

Cancel the task in the queue, regardless of whether the task has started uploading

  • fileid– the file ID to be canceled, cancel the first task in the queue if it is empty, and cancel all Tasks if ' * '
  • suppressevent– whether to prevent triggering of onuploadcancel events is very useful when emptying queues.
  1. <ahref = "javascript:$ (' #file_upload '). Uploadify (' Cancel ')" >
  2. Cancel the first </a>
  3. <a
  4. href = "javascript:$ (' #file_upload '). Uploadify (' Cancel '),
  5. ' * ') '> empty queue </a>
  6. <a
  7. href = "javascript:$ (' #file_upload '). Uploadify (' upload '),
  8. ' * ')> start uploading All Tasks </a>
Destroy () Destroys the Uploadify instance and restores the file upload button to its original state
  1. <a
  2. href = "javascript:$ (' #file_upload '). Uploadify (' Destroy ')" >
  3. Destroying Uploadify instances </a>
Disable (setdisabled)

Disable or enable the file browse button

setdisabled– set to True indicates disable, false to enable

OL class= "Linenums" >
  • <a
  • href=
  • Li class= "L2" >true) " > Disable button </A>
  • <a
  • href =
  • false) " > Enable button </A>
  • settings (name, value, resetobjects)

    Gets or sets the Uploadify instance parameter

    • name– property name, if only the property name is provided To get its value
    • value– property value
    • resetobjects– set to True, the update PostData object empties the existing value. Otherwise, the new value is added to its end.
    1. $ (' #file_upload '). Uploadify (' Settings ', ' ButtonText ', ' BROWSE ');
    2. $ #file_upload). uploadify (' Settings ', ' ButtonText ');
    Stop () stops the task currently being uploaded
    1. <a
    2. href = javascript: $ (' #file_upload '). Uploadify (' upload ',
    3. > start uploading </A>
    4. <a
    5. href = >
    6. stop uploading </a>
    Upload (Fileid) Immediately upload the specified file, if Fileid for ' * ' means upload all files, to specify upload multiple files, then each file Fileid as a parameter
    1. <a
    2. href = "javascript:$ (' #file_upload '). Uploadify (' upload ', ' * ')" >
    3. start uploading all the text </a>

    File uploaderdemo.php Download

    The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.