jquery File Upload Control uploadify

Http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html

jquery-based file upload control, support Ajax without refreshing uploads, multiple files at the same time upload, upload progress display, delete uploaded files.

Requires the use of jquery1.4 or above, Flash Player 9.0.24 or more.

There are two versions, one with Flash and one is HTML5. HTML5 need to pay ~ So here only to say the use of Flash version.

Official website: http://www.uploadify.com/

Control:

Usage:

First refer to the following file

<link rel= "stylesheet" type= "Text/css" href= "uploadify.css" ><script type= "Text/javascript" src= "/http Code.jquery.com/jquery-1.7.2.min.js "></script><script type=" Text/javascript "src=" Jquery.uploadify-3.1.min.js "></script>

Create a file input, or any other element with an ID, and initialize it with uploadify (note that the directory must have uploadify.swf, and uploadify.php background files, paths by the directory structure in the project)

<input type= "File" Name= "File_upload" id= "File_upload"/><script> $ (function () {   $ (' #file_upload '). Uploadify ({       ' swf '      : ' uploadify.swf ',     ' uploader ': ' uploadify.php '        //Put your options here    }　　　); });</script>

In this way, a most basic upload build is completed. The rationale is to change the file input you created to generate a DOM structure, create a div button, Button styles modify the. Uploadify-button in the Uploadify.css file to position the SWF file on top of the button so that when you click the button, you actually click the SWF

Options:

$ (' #file_upload '). Uploadify ({auto:false,//Accept True or false two values, which are automatically uploaded when you select a file when True); The selected files are added to the queue but are not uploaded, and can only be triggered using the upload method. Default to True when Auto is not set Buttonclass: "Some-class",//Set the Upload button class Buttoncursor: ' Han                 d ',//set the mouse to move the button on the open shape, accept two values ' hand ' and ' arrow ' (hand and arrow) Buttonimage: ' Img/browse-btn.png ', Sets the path of the picture button (when your button is a picture). If you use the default style, you can also create a mouse hover state, but to put the picture of the two states together, and the default is placed on the top, hover state of the following (the original is very difficult to express AH: You can create a hover state for the button by Stacking the off state above the hover state in the image).                This is only a convenient option, the best way is to write the picture in CSS. ButtonText: ' <div> Select File </div> ',//Set button text. Values are rendered as HTML, so you can also include HTML tags checkexisting: '/uploadify/check-exists.php ',//accept a file path. This file checks to see if the file name being uploaded already exists in the destination directory. Returns 1 when it exists, returns 0 when it does not exist (should be judged primarily as a background), false debug:false,//Turn debug mode on or off Fileobjna       Me: ' Filedata ',         Sets the file name used in the background script.                For example, in PHP, if this option is set to ' The_files ', you can use $_files[' the_files ' to access this uploaded file. Filesizelimit: ' 100MB ',//set the maximum capacity for uploading files. This value can be a number or a string. If it is a string, accept a unit (B,KB,MB,GB). The default unit is KB if it is a number. When set to 0, the filetypeexts is not restricted: ' *. * ',//sets the file extension (i.e. file type) that is allowed to be uploaded. But manually typing the file name bypasses this level of security checks, so you should always check the file type on the server. Enter multiple extensions separated by semicolons (' *.jpg;*.png;*.gif ') Filetypedesc: ' All Files ',//description of optional files. This value appears in the File Type drop-down option in the File browser window. (Not supported under Chrome, will be displayed as ' custom file ', IE and Firefox can be displayed description) FormData: {timestamp: ' <?php echo $tim Estamp;? > ', token: ' <?php echo MD5 (' Unique_salt '. $timestamp);? > ',//when uploading a file via get or post, this object provides additional data. If you want to set these values dynamically, you must use the settings method setting in the Onuploadstartg event. Use $_get or $_post arrays (PHP) to access these values in a background script. Crossing Mesh Reference: HTTP://WWW.UPLOADIFY.COM/DOCUMENTATION/UPLOADIFY/FORMDATA/HEIGHT:30,//Set the height of the button (unit p x), default is 30. (Do not write the unit in the value, and ask for an integer, width is the same) width:120,//Set button width (in px), default itemtemplate:false,//Template object. Specify a special HTML template for each item that is added to the upload queue. Template format please crossing net Http://www.uploadify.com/documentation/uploadify/itemtemplate/method: ' Post ',//Submit upload File method, accept post or get two values, default to post Multi:false,//Set whether to allow multiple files to be selected at once, true to allow, false does not allow O Verrideevents: [],//override event, accept an array of event names as parameters. The event set will be overwritten by user overrides preventcaching:true,//Whether the SWF file is cached. The default is true, which sets a random number to the URL address of the SWF so that it is not cached. (Some browsers cache the SWF file will not trigger the event inside--by rainweb) progressdata: ' percentage ',//Set file upload data display, there is ' Percentag E ' or ' Speed ' two parameters (percent and velocity) queueid:false,//Set the ID of the upload queue DOM element, and the uploaded item will be added into the DOM of this ID. When set to False, the queue Dom and ID are automatically generated. The default is False queuesizelimit:999,//sets the number of files in each upload queue. Note that the total number of uploaded files is not limited (that is uploadlimit). If the number of files added to the queue exceeds this value, the Onselecterror event will be triggered. The default value is 999 removecompleTed:true,//whether to remove files that have already been uploaded in the queue. False to not remove Removetimeout:3,//Set the delay time for deleting files after uploading is complete, default is 3 seconds.                If removecompleted is false, it makes no sense. Requeueerrors:false,//Set the upload process due to an error when uploading failed files are re-added to the queue upload SUCCESSTIMEOUT:30,//Set the number of seconds to wait for the server to respond after uploading the file, exceeding this time, will be considered the upload succeeds, the default is 30 seconds swf: ' Uploadify.s                WF ',//swf relative path, required to write uploader: ' uploadify.php '//server-side script file path, required to write uploadlimit:999//Upload the number of files. Reaching or exceeding this number will trigger the Onuploaderror method. Default 999})

Events:

$ (' #file_upload '). Uploadify ({oncancel:function (file) {console.log (' the file ' +                File.name + ' was cancelled. ') },//The file is removed from the queue when triggered, returns the filename parameter onclearqueue:function (queueitemcount) {Console . log (queueitemcount+ ' file (s) were removed Frome the queue ')}, triggered when the Cancel method is called and passed the ' * ' parameter.                In fact, it is triggered when the entire queue is removed, there is said Cancel method with * When canceling the entire upload queue ondestroy:function () {//Call Destroy method when the trigger }, Ondialogclose:function (Queuedata) {Console.log (queuedata.filesselected+ ' \ n ' +queuedata.filesqueued+ ' \ r \ n ' +queuedata.filesreplaced+ ' \ r \ n ' +queuedata.filescancelled+ ' \ r \ n ' + queuedata.fileserrored)}, and//Closes the Browse File dialog box when it is triggered. Returns the Queuedate parameter with the following properties:/* filesselected the number of files selected in the Browse for File dialog box filesqueued join    Number of files queued filesreplaced number of files to be replaced                Filescancelled Cancel the number of files that will be added to the queue fileserrored the number of files that returned the error */                    Ondialogopen:function () {//Opens the Select File dialog box when triggered}, Ondisable:function () { Trigger when Uploadify is disabled (via disable method)}, Onenalbe:function () {//enable UPL Oadify trigger (via Disable method)}, Onfallback:function () {//cannot detect browser compatibility flash when initializing Version is real trigger}, Oninit:function (instance) {Console.log (' The queue ID is ' + Inst Ance.settings.queueID)},//each time a queue is initialized, returns an instance of the Uploadify object Onqueuecomplete:fun                Ction (queuedata) {console.log (queuedata.uploadssuccessful+ ' \ n ' +queuedata.uploadserrored)                    },//The files in the queue are uploaded, the queuedate parameter is returned, and the following properties are available:/* uploadssuccessful number of files successfully uploaded Uploadserrored number of files in error */onselect:function (file) {Console.log (file.name)                    },//Select trigger when each file is added to queue, return file parameter Onselecterror:function (file,errorcode,errormsg) {                Console.log (ErrorCode) Console.log (THIS.QUEUEDATA.ERRORMSG)}, Trigger when file error is selected, return file,errocode,errormsg three parameters/* ErrorCode is a JS object that contains an error code to see the errors sent in the event Errors to determine the exact type of error, there may be the following constants: queue_limit_exceeded:-100 the number of files selected exceeds the set maximum; File_exceeds_siz The size of the e_limit:-110 file exceeds the set invalid_filetype:-130 selected file type and does not match the settings errormsg complete error message, if you do not override the default                    can use ' THIS.QUEUEDATA.ERRORMSG ' to access the complete error message */Onswfready:function () { The SWF animation fires after loading, no parameters}, onuploadcomplete:function (file) {//upload succeeded or failed in each file After triggering, the uploaded file object is returned or an error is returned ifYou want to know if the upload was successful, and finally use the Onuploadsuccess or Onuploaderror event}, Onuploaderror:function (File,errorcode,ero rmsg,errorstring) {},//A file was uploaded but returned an error when triggered, with the following parameters/* file completed on The ErrorCode returned error code erormsg returns an error message errorstring a readable letter containing all the error details */Onuploadprogress:function (file,bytesuploaded,bytestotal,totalbytesuploaded,totalbytest                Otal) {$ (' #pregress '). HTML (' Total need to upload ' +bytestotal+ ' bytes, ' + ' uploaded ' +totalbytestotal+ ' bytes ')}, Each time the upload progress of a file is triggered, the following parameters are returned */* file is uploading file object bytesuploaded.                    Bytes uploaded Bytestotal The total number of bytes of the file totalbytesuploaded the total number of bytes uploaded in the currently uploaded operation (all files) Totalbytestotal Total uploaded bytes of all files */onuploadstart:function (file) {Conso  Le.log (' Start update ')              },//Each file is about to be uploaded before triggering onuploadsuccess:function (File,data,respone) { Alert (' ID: ' + file.id
+ '-index: ' + file.index
+ '-file name: ' + file.name
+ '-File size: ' + file.size
+ '-type: ' + file.type
+ '-Date Created: ' + file.creationdate
+ '-Date Modified: ' + file.modificationdate
+ '-File status: ' + file.filestatus
+ '-server-side message: ' + data
+ '-whether the upload succeeded: ' + response); }//Each file uploaded successfully after upload})

Methods:
Uploadify uses the plug-in pattern recommended by jquery, which means that all method calls are kept in a single namespace. To invoke these different methods, simply pass the method as the first parameter into the uploadify and call on the line. Adding parameters to these methods will be passed into this method (these two translations are not very smooth, with the original: to use the different method calls, simply call uploadify on the DOM element with the Method call as the first argument. Any additional arguments added after the method name is passed to the method.)

Cancel: Cancels the first uploaded file, if later with the parameter "*" then cancels out the entire upload queue, such as $ (EL). Uploadify (' Cancel ', ' * ')

Upload: Upload the first uploaded file, if the following parameter "*" then upload the entire queue, like cancel

Destroy: Remove upload build, upload by HTML default method

Disable: TRUE or false two parameter, indicating whether to suppress the upload button, true to suppress, false to allow upload

Settings: Returns or updates the method value of an instance, which is the value of the method that is returned when a parameter is accepted for a method name, and when followed by another parameter, the value of the method is updated. Such as

$ (EL). Uploadify (' Settings ', ' ButtonText ', ' BROWSE '); Set the value of ButtonText to browse$ (EL). Uploadify (' Settings ', ' buttontext ')//return the value of ButtonText

Stop: Stop a file or queue that is being uploaded

Download Demo

Translation into the middle of the original online has already been the Chinese API and other examples, here with a few, but also I refer to the translation of information

Http://wenku.baidu.com/view/9df6ce0bde80d4d8d15a4faa.html

Http://wenku.baidu.com/view/87df2673a417866fb84a8efd.html

Http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

Http://www.cnblogs.com/luohu/archive/2011/12/16/2290135.html

jquery File Upload Control uploadify