jquery uploadify3.2.1 Plugin Usage instructions

Source: Internet
Author: User


Uploadify allows multiple file uploads of jquery plugins, with two versions, one based on HTML5 (uploadifive), and one based on Flash (uploadify).
The HTML5 version allows drag-and-drop files to be added to the file list in real time. The plugin provides the appropriate upload progress bar. Custom file size, number, type, maximum number of uploads at the same time.
The background code file is required to process the file upload, in the project to set the folder for uploading files.
(1) Introduce download uploadify plugin file and jquery file.
<script src= "Jquery.min.js" type= "Text/javascript" ></script>
<script src= "Jquery.uploadify.min.js" type= "Text/javascript" ></script>
<link rel= "stylesheet" type= "Text/css" href= "Uploadify.css" >
(2) Add a form
<form>
<div id= "queue" ></div>
<input id= "File_upload" name= "file_upload" type= "file" multiple= "true" >
</form>
(3) The JS function of uploading
<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ ("#uploadify"). Uploadify ({
' swf ': '/uploadify/uploadify.swf ',
Relative path appears as a button click on the Open File dialog box
' Uploader ': '/uploadify/uploadify.php '
Relative path to the background handler
' Auto ': false,
True after selecting the file directly upload false click the upload button to start uploading
' Buttonclass ': ' Some-class ',
Classes added to the upload button
' Buttoncursor ': ' Arrow ',
Sets the type of mouse docking browse button hand arrow
' Buttonimage ': '/uploadify/browse-btn.png ',
Background picture of the browse button
' ButtonText ': ' BROWSE ... ',
Text on the browse button
' checkexisting ': '/uploadify/check-exists.php ',
The relative path of the background handler that is used to determine if the file of the upload selection exists on the server exists function return 1 does not exist return 0
' Debug ': true,
Open upload swfupload debug mode
' Fileobjname ': ' The_files ',
Set a name in the server handler to fetch data from the uploaded file according to that name
' Filesizelimit ': ' 100KB ',
Upload file size limit default unit is KB set to 0 No limit
' Filetypedesc ': ' Any old file you want ... ',
The prompt text used to set the Select File dialog box
' filetypeexts ': ' *.gif; *.jpg; *.png ',
File types that can be selected
' FormData ': {' somekey ': ' somevalue ', ' Someotherkey ': 1},
Background pass static parameters
' Onuploadstart ': function (file) {
$ ("#file_upload"). Uploadify ("Settings", "FormData", {' CtrlId ': CtrlId});
In the Onuploadstart event, the dynamic pass parameters are passed to the background before uploading
}
' Height ': 50,
Height of the browse button
' method ': ' Post ',
Submission mode post (default) or get
' Multi ': true
Set whether multiple files can be uploaded
' Overrideevents ': [' onuploadprogress '],
Set which events can be overridden in JSON format
' preventcaching ': false,
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 ': ' Speed ',
Upload Progress display mode, percentage display upload percentage, speed display upload rate
' Queueid ': ' Some_file_queue ',
Sets the ID of the upload queue container dom element and, if false, automatically generates a queue container.
' Queuesizelimit ': 1,
The maximum number of tasks that the queue displays, and if the number of files selected exceeds this limit, the Onselecterror event will be started. Note This is not the maximum number of file uploads and you should set Uploadlimit if you want to limit the maximum number of uploaded files.
' removecompleted ': false,
Whether the completed task is automatically removed from the queue, and if set to False, this task remains displayed by default true
' Removetimeout ': 10,
If you set the task to be automatically removed from the queue after it is completed, you can specify the interval from completion to the time of removal
' Requeueerrors ': true,
Set true to return an error message after a single task upload fails and rejoin the task queue upload.
' Successtimeout ': 5,
File upload success requires a return flag if the time expires it is considered successful
' Uploadlimit ': 1,
Maximum number of uploaded files, reaching or exceeding this limit will trigger the Onuploaderror event
' Width ': 300,
Width per pixel of the browse button
' OnCancel ': function (file) {
Alert (' The file ' + File.name + ' was cancelled. ');
},
When a file in a file queue is deleted, it triggers the object that the method parameter is canceled.
' Onclearqueue ': function (queueitemcount) {
Alert (queueitemcount + ' file (s) were removed from the queue ');
} ,
The call to the function Cancel method (parameter = *) is triggered, and the Queueitemcount parameter is the number of files being canceled.
' OnDestroy ': function () {
Alert (' I am getting destroyed! ');
},
triggered when calling Destory
' Ondialogclose ': function (queuedata) {
Alert (queuedata.filesqueued + ' files were queued of ' + queuedata.filesselected + ' selected files. There is ' + queuedata.queuelength + ' Total files in the ' queue. ');
},
Triggered when the file browse box is closed, and if this event is overridden, an error message will not pop up when a file is added to the queue. filesselected File Selection dialog box How many files have been selected filesqueued the number of files that have been added to the queue filesreplaced how many files have been replaced in the queue filescancelled how many files have been canceled Fileserrored How many files have gone wrong
' Ondialogopen ': function () {
$ (' #message_box '). HTML (' The file dialog box was opened ... ');
},
When the File selection dialog box pops up, the selection dialog box may not be executed completely before it is closed.
' Ondisable ': function () {
Alert (' You have disabled uploadify! ');
},
Triggers when the Disable method is called to disable the Uploadify upload button

' Onenable ': function () {
Alert (' can use uploadify again. ');
},
Disable method triggers when the Uploadify upload button is enabled
' Onfallback ': function () {
Alert (' Flash is not detected. ');
},
Uploadify triggered when the current browser does not support flash during initialization
' OnInit ': function (instance) {
Alert (' The queue ID is ' + Instance.settings.queueID);
},
Triggered at the end of the first initialization uploadify
' Onqueuecomplete ': function (queuedata) {
Alert (queuedata.uploadssuccessful + ' files were successfully uploaded. ');
},
The number of files that triggered uploadssuccessful– upload success after the file upload queue has been processed uploadserrored– the number of files that failed to upload
' OnSelect ': function (file) {
Alert (' The file ' + File.name + ' is added to the queue. ');
},
When you add each upload task to the queue after selecting the file, it will trigger
' Onselecterror ': function () {
Alert (' The file ' + File.name + ' returned an error and is not a added to the queue. ');
},
When you select a file and add each upload task to the queue, the failure will trigger
' Onswfready ': function () {
Alert (' The Flash file is ready to go. ');
},
Flash file is triggered after successful loading
' Onuploadcomplete ': function (file) {
Alert (' The file ' + File.name + ' finished processing. ');
},
After each file is uploaded, it will be triggered regardless of success or not
' Onuploaderror ': function (file, ErrorCode, ErrorMsg, errorstring) {
Alert (' The file ' + File.name + ' could not being uploaded: ' + errorstring);
},
Trigger on file on outgoing
' Onuploadprogress ': function (file, bytesuploaded, Bytestotal, totalbytesuploaded, totalbytestotal) {
$ (' #progress '). HTML (totalbytesuploaded + ' bytes uploaded of ' + totalbytestotal + ' bytes. ');
},
This event is triggered multiple times during the processing of the upload queue, and is triggered whenever the task status is updated
' Onuploadstart ': function (file) {
Alert (' Starting to upload ' + file.name);
},
Triggered when the file is about to start uploading
' Onuploadsuccess ': function (file, data, response) {
Alert (' The file ' + File.name + ' is successfully uploaded with a response of ' + response + ': ' + data ');
}
Trigger when file upload is successful
});
});
</script>
(4) Action trigger


<a href= "javascript:$ (' #file_upload '). Uploadify (' Cancel ')" >cancel
First file</a>
|
<a href= "javascript:$ (' #file_upload '). Uploadify (' Cancel ', ' * ') ' >clear
the Queue</a>
|
<a href= "javascript:$ (' #file_upload '). Uploadify (' upload ', ' * ')" >upload
the Files</a>
Cancel ( FileID, Suppressevent) cancels the task in the queue, regardless of whether the task has already started uploading fileid–
the file ID to cancel, if empty, cancels the first task in the queue, and cancels all tasks if ' * '
<a href= " javascript:$ (' #file_upload '). Uploadify (' Destroy ') ">destroy
Uploadify</a>
Destroy () Destroys the Uploadify instance and restores the file upload button to the original state
<a href= "javascript:$ (' #file_upload '). Uploadify (' Disable ', true)" >disable
the Button</a>
|
<a href= "javascript:$ (' #file_upload '). Uploadify (' disable ', false)" >enable
the Button</a>
Disable (setdisabled) disables or enables the file browse button
<a href= "Javascript:changebtntext ()" >change the button text</a>
|
<a href= "Javascript:returnbtntext (); >read the Button</a>

function Changebtntext () {
$ (' #file_upload '). Uploadify (' Settings ', ' ButtonText ', ' BROWSE '); }

function Returnbtntext () {alert (' the button says ' +
$ (' #file_upload '). Uploadify (' Settings ', ' ButtonText ')); } settings (name,
Value, resetobjects) Gets or sets the Uploadify instance parameter

<a href= "javascript:$ (' #file_upload '). Uploadify (' Stop ')" >stop the
Uploads!</a>
Stop () stops the task that is currently being uploaded
<a href= "javascript:$ (' #uploadify '). Uploadifyupload ()" > Uploads </a>
<a href= "javascript:$ (' #uploadify '). Uploadifyclearqueue ()" > Cancel upload </a>
Upload (FileID) immediately upload the specified file, if FileID as ' * ' means to upload all files, to specify to upload more than one file, the FileID of each file as a parameter

jquery uploadify3.2.1 Plugin Usage instructions

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.