Detailed jquery uploadify File Upload plugin use method _jquery

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.	<ahref = "javascript:$ (' #file_upload '). Uploadify (' Cancel ')" > Cancel the first </a> <a href = "javascript:$ (' #file_upload '). Uploadify (' Cancel '), ' * ') '> empty queue </a> <a href = "javascript:$ (' #file_upload '). Uploadify (' upload '), ' * ')> start uploading All Tasks </a>
Destroy ()	Destroys the Uploadify instance and restores the file upload button to its original state	<a href = "javascript:$ (' #file_upload '). Uploadify (' Destroy ')" > 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.	$ (' #file_upload '). Uploadify (' Settings ', ' ButtonText ', ' BROWSE '); $ #file_upload). uploadify (' Settings ', ' ButtonText ');
Stop ()	stops the task currently being uploaded	<a href = javascript: $ (' #file_upload '). Uploadify (' upload ', > start uploading </A> <a href = > 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	<a href = "javascript:$ (' #file_upload '). Uploadify (' upload ', ' * ')" > 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!