jquery File Upload Control uploadify detailed _jquery

Based on the jquery file upload control, support Ajax No refresh upload, multiple files at the same time upload, upload progress show, delete uploaded files.

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

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

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

Control screenshot:

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 uploadify (note that the directory should have uploadify.swf this file, and uploadify.php background files, the path 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>

This completes a most basic upload build. The basic principle is to change the file input you create to generate a DOM structure, create a div button, The button style modifies the. Uploadify-button in the Uploadify.css file, positioning the SWF file on the button so that when you click the button, the SWF is actually clicked.

Options:

$ (' #file_upload '). Uploadify ({auto:false,//Accept True or false two values, automatically uploaded when a file is selected when True, and false to add only the selected file into the queue but not upload. You can only use the Upload method to trigger the upload. Default to True Buttonclass when auto is set: "Some-class",//Set the Upload button class Buttoncursor: ' Hand ',//set the mouse to move to the button on the open, accept two values ' hand ' and ' arrow ' (hand Shapes and arrows) buttonimage: ' Img/browse-btn.png ',//Set 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 placed above, hover state of the following (the original is very difficult to express AH: You can create a hover states to the button by Stacking the above the hover state in the image.
 This is a more 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. The presence returns 1, does not exist when returns 0 (should be primarily as background judgment bar), default to False debug:false,//Turn on or off debug mode fileobjname: ' Filedata ',//Set file name used in 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 maximum capacity of upload file. This value can be a number or a string. If it is a string, accept a unit (B,KB,MB,GB). If it is a number, the default unit is KB. When set to 0, the filetypeexts is not restricted: ' *.* ',
 Sets the file name extension (that is, file type) that is allowed to be uploaded. But typing a file name manually bypasses this level of security, so you should always check the file type on the server side. Enter multiple extensions separated by semicolons (' *.jpg;*.png;*.gif ') Filetypedesc: ' All Files ',//description of the optional file. This value appears in the File type Drop-down option in the File Browsing window. (Chrome does not support, will display as ' custom file ', IE and Firefox can display description) FormData: {timestamp: ' <?php echo $timestamp;? > ', token: ' <?php echo MD5 (' Unique_salt '. $timestamp);? > '}, this object provides additional data when uploading files via get or post. If you want to set these values dynamically, you must use the method settings for the settings in the Onuploadstartg event. Use $_get or $_post arrays (PHP) to access these values in the background script. Reader Network reference: HTTP://WWW.UPLOADIFY.COM/DOCUMENTATION/UPLOADIFY/FORMDATA/HEIGHT:30,//Set the height of the button (unit px), the default is 30. (Do not write units in values, and require an integer, width is the same) width:120,//Set button width (unit px), default itemtemplate:false,//Template object. Specify a special HTML template for each item added to the upload queue. Template format please reader network http://www.uploadify.com/documentation/uploadify/itemtemplate/method: ' Post ',//Submit upload file method, accept post or get two values, The default is post Multi:false,//sets whether to allow multiple files to be selected at once, true to allow, false does not allow overrideevents: [],//rewrite events, accept an array of event names as arguments. The event you set will be overwritten by user overrides preventcaching:true,//whether to cache SWF files. The default is true to set a random number to the SWF's URL address so that it is not cached. (Some browsers cache the SWF fileCan not trigger the event inside--by rainweb) progressdata: ' percentage ',//Set file upload display data, have ' percentage ' or ' Speed ' two parameters (percent and speed) Queueid:false, Sets the ID of the upload queue DOM element, and the uploaded item is added to the DOM of this ID. When set to False, the queue Dom and ID are automatically generated. Default to False queuesizelimit:999//Set the number of files per upload queue. Note that it is not limited to the total number of uploaded files (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 the removetimeout:3,//Set the delay time to delete the file after the upload is completed, default to 3 seconds. If removecompleted is false, it makes no sense. Requeueerrors:false,//Set upload process due to error caused upload failed file to rejoin the queue upload successtimeout:30,// Set file upload after waiting for the server to respond to the number of seconds, beyond this time, will be considered upload success, the default is 30 seconds swf: ' uploadify.swf ',//swf relative path, must write uploader: ' uploadify.php '// Server-side script file path, required uploadlimit:999//number of uploaded files. Reaching or exceeding this number triggers the Onuploaderror method.
 Default 999})

event:

$ (' #file_upload '). Uploadify ({oncancel:function (file) {console.log (' the file ' + File.name + ' was cancelled. ') The///file is triggered when it is removed from the queue, returns the file parameter Onclearqueue:function (queueitemcount) {console.log (queueitemcount+ ' file (s) were removed FR ome the "queue"},//When invoking the Cancel method and passing in the parameter of ' * ', it triggers when the file is removed from the entire queue, and the entire upload queue is cancelled ondestroy:function () {/ Triggered by the Destroy method, Ondialogclose:function (queuedata) {console.log (queuedata.filesselected+ ' \ n ' + Queuedata.filesqueued+ ' \ r \ n ' +queuedata.filesreplaced+ ' \ r \ n ' +queuedata.filescancelled+ ' \ r \ n ' + queuedata.fileserrored)}, and/or triggered when the Browse File dialog box is turned off. Returns the Queuedate parameter with the following properties:/* filesselected the number of files selected in the Browse File dialog box filesqueued the number of files added to the upload queue filesreplaced the number of files replaced Filescancelle D Cancel the number of files that will be added to the queue fileserrored return the wrong number of files/ondialogopen:function () {//Open the Select File dialog box when triggered}, Ondisable:function () {//Forbidden Triggered with uploadify (via Disable method)}, Onenalbe:function () {//Enable uploadify (via Disable method)}, Onfallback:function () {//in initialization Real trigger is not detected when the browser has a compatible flash version, onInit: function (instance) {Console.log (' queue ID is ' + Instance.settings.queueID '},///////////Every time a queue is initialized, returns an instance of Uploadify object on Queuecomplete:function (queuedata) {console.log (queuedata.uploadssuccessful+ ' \ n ' +queuedata.uploadserrored)},// After the files in the queue are uploaded, the queuedate parameters are returned, with the following properties:/* uploadssuccessful The number of files successfully uploaded uploadserrored the number of files wrong Onselect:function (fi Le) {Console.log (File.name)},//Select trigger when each file is incremented into the queue, returns the file parameter Onselecterror:function (file,errorcode,errormsg) {Console. Log (ErrorCode) Console.log (THIS.QUEUEDATA.ERRORMSG)},//Select trigger when file error, return file,errocode,errormsg three parameters/* ErrorCode is a contained error Ber JS object, used to view the error code sent in the event to determine the exact type of error, there may be the following constants: queue_limit_exceeded:-100 the number of files selected exceeds the maximum set; file_exceeds_size_limit:- 110 the size of the file exceeds the set invalid_filetype:-130 selected file type does not match the set ERRORMSG complete error message, if you do not override the default event handler, you can use ' THIS.QUEUEDATA.ERRORMSG ' to access the end Integer error message * * Onswfready:function () {//swf animation after loading, no parameters}, onuploadcomplete:function (file) {//after each file upload success or failure to trigger, return upload The file object or return an error if you want to know if the upload was successful and finally use OnuploadSuccess or Onuploaderror event}, Onuploaderror:function (file,errorcode,erormsg,errorstring) {},//A file is uploaded while an error is returned, with the following parameters /* File completes uploaded object ErrorCode error code returned erormsg error message errorstring contains all error details of readable information * * Onuploadprogress:function (file , Bytesuploaded,bytestotal,totalbytesuploaded,totalbytestotal) {$ (' #pregress '). HTML (' Total need to upload ' +bytestotal+ ' bytes, ' + ' Upload ' +totalbytestotal+ ' bytes '},//////////////////////////////////////// The total number of bytes uploaded by the totalbytesuploaded in the current upload (all files) totalbytestotal The total number of bytes uploaded for all files/onuploadstart:function (file) {Consol E.log (' Start Update ')},//Each file will be uploaded before the trigger Onuploadsuccess:function (file,data,respone) {alert (' ID: ' + file.id + ') -index: ' + file.index + '-filename: ' + file.name + '-File size: ' + file.size + '-type: ' + file.t Ype + '-Date Created: ' + file.creationdate + '-Modification date: ' + file.modificationdate + '-File status: ' + File.filestatus + '-serverEnd message: ' + data + '-whether upload success: ' + response '; 

 ///Every file upload succeeds after the trigger})

Method:

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

Cancel: Cancels the first uploaded file, and cancels the entire upload queue, such as $ (EL), if the parameter "*" is followed. Uploadify (' Cancel ', ' * ')

Upload: Upload the first uploaded file, if the back with the parameter "*" then upload the entire queue, as with cancel

Destroy: Remove upload build, upload by HTML default method

Disable: Two arguments with true or false, indicating whether the upload button is prohibited, true is forbidden, false indicates allow upload

Settings: Returns or updates the method value of an instance that takes the parameter of a method name to return the value of that method, and when followed by an argument, updates the value of that method. Such as

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

Stop: Stops the file or queue being uploaded

Download Demo

The above is the entire content of this article, I hope to give you a reference, but also hope that we support the cloud habitat community.