jquery Upload plugin uploadify use Help

Source: Internet
Author: User
Tags rar

Uploadify is a jquery upload plugin, the implementation of the effect is very good, with progress display. Its functional features are summarized as follows:

    1. Supports single-file or multi-file uploads to control the number of files uploaded concurrently
    2. Support the use of various languages on the server side, such as Php,.net,java ...
    3. Configurable upload file type and size limit via parameters
    4. Parameters can be configured to automatically upload when a file is selected
    5. Easy to scale, can control the callback function of each step (OnSelect, OnCancel ... )
    6. Control appearance through interface parameters and CSS

Use Help:

Website address: http://www.uploadify.com/

Official parameter Configuration document: http://www.uploadify.com/documentation/

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

How to use:

  1. Download the plugin installation package, add the necessary files (red dot) to the project; if you have. NET you can install it in your project using the NuGet command:install-package uploadfy
    1. Main file Description: Jquery.uploadify.js (complete the Upload function script file, in the call page reference, Min is compressed version), UPLOADIFY.CSS (appearance style sheet), uploader.swf (the main file of the upload control, Flash control), Uploadify-cancel.png (Close button's small picture), other files are not necessary, can be ignored.
  2. Page Add Reference:
        <link href= "~/scripts/uploadify/uploadify.css" rel= "stylesheet"/> <script    src= "~/scripts/ Jquery-1.8.2.min.js "></script>    <script src=" ~/scripts/uploadify/jquery.uploadify-3.2.min.js " ></script>

  3. Page Tags: <input id= "uploadfy" type= "file" name= "Uploadfy"/>
  4. To invoke the Uploadfy bound upload event:
    <script>        $(function() {            $("#uploadfy"). uploadify ({' swf ': '/scripts/uploadify/uploadify.swf ',//path to the uploadify.swf file (absolute path, relative path)Uploader: '/home/file ',//Server Response AddressCancelimg: '/scripts/uploadify/uploadify-cancel.png ',//Close button Picture pathMultitrue,//whether multiple filesAutotrue,//whether to upload automatically, true, select File after upload, false, click Upload to start uploading, default TrueButtonText: "Upload file",//Space namePreventcaching:false,//whether to cachefilesizelimit:1024 * 1024 * 10,//Single file limit sizeFiletypedesc: ' *.jpg;*.png;*.doc;*.txt;*.zip;*.rar; ',//file suffix DescriptionFiletypeexts: ' *.jpg;*.png;*.doc;*.txt;*.zip;*.rar; ',//file suffix RestrictionsHEIGHT:20,//HeightOnuploadsuccess:function(file, data, response) {//post-upload success Events                    if(data = "Success") {//data return value itself in backend customization                        //your own code.                    }                }            });    }); </script>

  5. Service side, and ordinary upload files, nothing special, omitted;

The properties of the Uploadfy are described in, events, and methods:

First, the attribute
Property name Default value Description
Auto True Set to True when the file is selected and uploaded directly, false need to click the Upload button before uploading.
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 Recurrence Checker, check if the file to be uploaded exists on the server side, there is return 1, there is no return 0
Debug False If set to True, the debug mode that SWFUpload is 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 type is the size in kilobytes, if it is a string, you can use (B, KB, MB, or GB) units, 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 form of ' *.doc;*.pdf;*.rar '.
FormData The JSON format uploads the additional data submitted to the server at the same time as each file, and can be dynamically set 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: the id of the Instanceid–uploadify instance fileid– the ID of this file in the queue, or the name of the filename– file for this task filesize– the size of the current upload file Insert template label using format such as: ${filename}
Method Post Submit mode post or get
Multi True When set to True, multiple files can be uploaded.
Overrideevents Set which events can be rewritten in 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 the upload progress display mode, percentage display upload percentage, speed display upload rate
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 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 True Whether the completed task is automatically removed from the queue, and if set to false, keeps the task displayed.
Removetimeout 3 If you set the task to be automatically removed from the queue when it is completed, you can specify the interval from completion to the time of removal.
Requeueerrors False If set to True, an error will be returned after a single task upload fails and rejoin the task queue for uploading.
Successtimeout 30 After successful file upload, the server should return a success flag, this setting returns the time-out of the result
Swf ' Uploadify.swf ' The relative path to the uploadify.swf file.
Uploader uploadify.php The relative path of the spooler.
Uploadlimit 999 The maximum number of uploaded files that will trigger the Onuploaderror event if this limit is reached or exceeded.
Width 120 Sets the width of the file browse button.

Ii. Events
Event name Description
OnCancel (file)

triggered when you click the Close button of a file in the file queue or when you click Cancel Upload, the file parameter is the object that is being canceled for uploading

Onclearqueue (Queueitemcount) triggered when the function cancel method is called, the Queueitemcount parameter is the number of files that were canceled for uploading.
OnDestroy () triggered when the Destory method is invoked
Ondialogclose (Queuedata)

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.

The Queuedata object contains the following properties:

  • filesselected File Selection dialog box How many files are selected by the CPC
  • filesqueued the number of files that have been added to the queue
  • filesreplaced the number of files that have been replaced in the queue
  • Filescancelled How many files have been canceled fileserrored how many files have gone wrong
Ondialogopen () Starts immediately when the file selection dialog pops up, but may not be fully executed until the File selection dialog box is closed.
Ondisable () Triggered when the Disable method is invoked when the Uploadify upload button is disabled.
Onenable () Triggered when the Disable method is invoked when the Uploadify upload button is enabled.
Onfallback () triggered when the current browser does not support flash during initialization of uploadify.
OnInit () Triggered at the end of the first initialization uploadify.
Onqueuecomplete (Queuedata)

Triggered after the file upload queue has been processed.

The Queuedata object contains the following properties:

  • uploadssuccessful– number of files uploaded successfully
  • uploadserrored– number of files failed to upload
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 add each upload task to the queue, it is triggered if the failure occurs.

file– File Object

The errorcode– error code is as follows:

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

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

Onswfready () triggered when the Flash file is loaded successfully.
Onuploadcomplete (file) After each file is uploaded, it will be triggered regardless of success or not.
Onuploaderror (file, ErrorCode, ErrorMsg, errorstring) On the file, the parameter is returned by the service-side program.
Onuploadprogress (file, bytesuploaded, Bytestotal, totalbytesuploaded, Totalbytestotal)

This event is triggered multiple times during the processing of the upload queue, and fires whenever the task status is updated.

  • file– File Object
  • bytesuploaded– number of bytes uploaded
  • bytestotal– Total Files bytes
  • totalbytesuploaded– The total number of bytes 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)

Triggered when file upload is successful

  • file– File Object
  • data– information returned by the server output
  • response– if the output is true, if no response is false, if the return is false, assuming true after the time of the Successtimeout setting is exceeded

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

Cancels a 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 block triggering of onuploadcancel events is useful when emptying a queue.

<a href= "javascript:$ (' #file_upload '). Uploadify (' Cancel ') ' > Cancel 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 ')" > Destroy Uploadify instance </a>
Disable (setdisabled)

Disable or enable the file browse button

setdisabled– set to True indicates disabled, FALSE is enabled

<a href= "javascript:$ (' #file_upload '). Uploadify (' Disable ', true) ' > Disable button </a>

<a href= "javascript:$ (' #file_upload '). Uploadify (' disable ', false)" > Enable button </a>

Settings (name, value, resetobjects)

Gets or sets the Uploadify instance parameter

  • The name– property name, which is the value of the given property name
  • value– Property value
  • When resetobjects– is set to true, updating the PostData object empties the existing value. Otherwise, the new value is added to the end of it.

$ (' #file_upload '). Uploadify (' Settings ', ' ButtonText ', ' BROWSE ');

$ (' #file_upload '). Uploadify (' Settings ', ' ButtonText '));

Stop () Stop a task that is currently being uploaded

<a href= "javascript:$ (' #file_upload '). Uploadify (' upload ', ' * ') ' > Start uploading </a>

<a href= "javascript:$ (' #file_upload '). Uploadify (' Stop ') > Stop uploading </a>

Upload (FileID) Upload the specified file immediately, if Fileid is ' * ' means upload all files, to specify to upload multiple files, then each file's Fileid as a parameter <a href= "javascript:$ (' #file_upload '). Uploadify (' upload ', ' * ') > Start uploading

Form borrowed from: http://www.cnblogs.com/yangy608/p/3915349.html

jquery Upload plugin uploadify use Help

Related Article

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.