jquery Upload plugin uploadify use details (forward the original author Feng Wei)

Source: Internet
Author: User
Tags httpcontext unique id

jquery Upload plugin uploadify use detailed This article uploadify version 2.1.0, is obsolete, as of (2016-09-25) the latest version of 3.2.1 Details, please visit "jquery Upload plugin uploadify use detailed (3.2.1)"

Uploadify is a jquery upload plugin, the implementation of the effect is very good, with progress display. However, the official provided instance when PHP version, this article will detail the use of uploadify in the ASPNET, you can also click on the following link for demonstration or download.

    • Official Downloads
    • Official documents
    • Official demo

First, follow the steps below to implement a simple upload function.

1 Create a Web project, named Jqueryuploaddemo, and download the latest version from the official website to unzip and add to the project.

2 Add the Uploadhandler.ashx file to the project to process the upload of the file.

3 in the project diagram:

2010-12-29_120720

The code for the 4 Default.aspx HTML page is modified as follows:

1 2 3 4 5 6 7 8 9 Ten One A - - the - - - + - + A at - - - - - in - to + - the * $ Panax Notoginseng - the + A the <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="Server" > <title>uploadify</title> <link href="js/jquery.uploadify-v2.1.0/example/css/default.css" rel= "stylesheet" type="text/css"/> <link href="js/jquery.uploadify-v2.1.0/uploadify.css" rel= "stylesheet" type="text/css"/>   <script type="Text/javascript" src="Js/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js" ></script>   <script type="Text/javascript" src="Js/jquery.uploadify-v2.1.0/swfobject.js" ></script>   <script type="Text/javascript" src="Js/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js" ></script>   <script type="Text/javascript" > $ (document). Ready (function () {$ ("#uploadify"). Uploadify ({ ' uploader ': ' js/jquery.uploadify-v2.1.0/uploadify.swf ', ' script ': ' uploadhandler.ashx ', ' cancelimg ': ' js/jquery.uploadify-v2.1.0/cancel.png ', ' folder ': ' uploadfile ', ' queueid ': ' filequeue ', ' auto ': false, ' multi ': true }); }); </script>  </head> <body> <div id="Filequeue" ></div> <input type="file" name="uploadify" id="uploadify"/> <p> <a href="javascript:$ (' #uploadify '). Uploadifyupload ()" > Upload </a>| <a href="javascript:$ (' #uploadify '). Uploadifyclearqueue ()" > Cancel upload </A > </p> </body> </html>

The ProcessRequest method code for the 5 Uploadhandler class is as follows:

1 2 3 4 5 6 7 8 9 Ten One A - - the - - - + - + A at - public void ProcessRequest (HttpContext context) { Context. Response. ContentType = "Text/plain"; Context. Response. Charset = "Utf-8";  httppostedfile file = context. Request. files["Filedata"]; String uploadpath = HttpContext. Current. Server. MapPath (@context. request["folder"]) +"\ \";   if (file! = null) { if (! Directory. Exists (Uploadpath)) {Directory. CreateDirectory (Uploadpath); }file. SaveAs (uploadpath + file. FileName); //The following code is missing, upload queue display will not disappear automatically after uploading successfully Context. Response. Write ("1"); } Else { Context. Response. Write ("0"); }}

6 post-operation effects such as:

2010-12-29_120813

7 After selecting two files, click Upload, you can see the UploadFile folder will increase these two files.

The above simply implemented an upload function, relying on the function uploadify implementation, the parameters of the Uploadify function is in JSON format, you can modify the key value of the JSON object to customize the settings, If multi is set to TRUE or false to control whether multiple file uploads are possible, the following key values are described below:

The relative path to the uploader:uploadify.swf file, which is a button with a text browse, and then fades out of the Open File dialog box, the default value: uploadify.swf.

Script: The relative path of the spooler. Default value: uploadify.php

Checkscript: The relative path of the spooler that is used to determine whether the uploaded file is present on the server

Filedataname: Sets a name for the server handler to fetch data from the uploaded file according to that name. Default is Filedata

Method: Submit by post or get default to post

Scriptaccess:flash the access mode of the script file, if the local test is set to always, the default value: Samedomain folder: The directory where the file is uploaded.

Queueid: The ID of the file queue that matches the ID of the div holding the file queue.

Queuesizelimit: When multiple file generation is allowed, set the number of selected files, the default value: 999.

Multi: When set to true, multiple files can be uploaded.

Auto: Set to True when the file is selected and uploaded directly, false need to click the Upload button before uploading.

Filedesc: This property value must be set after the Fileext property is valid to set the prompt text in the Select File dialog box, such as setting Filedesc as "Please select RAR doc PDF File" To open the File selection box effect as:

2010-12-29_120847

Fileext: Sets the type of file that can be selected, in the form of: '. doc;. Pdf;*.rar '.

SizeLimit: Size limit for uploaded files.

Simuploadlimit: The default number of simultaneous uploads is allowed: 1.

ButtonText: The text of the browse button, default: Browse.

BUTTONIMG: The path to the picture of the browse button.

Hidebutton: Set to True to hide the picture of the browse button.

Rollover: The value is true and False when set to True when the mouse moves over the browse button with a reversal effect.

Width: Set the browse button to the default value: 110.

Height: Sets the altitude of the browse button, the default value: 30.

Wmode: Setting this to transparent can make the flash background file of the browse button transparent, and the Flash file will be placed at the highest level of the page. Default value: Opaque.

CANCELIMG: Select the Close button icon on each file after the file is selected in the file queue, such as:

2010-12-29_120923

The value of the key described above is either a string or a Boolean type, which is simpler, and the value of the key to be introduced is a function that returns some information to the user when selecting a file, an error, or some other action.

OnInit: Do some initialization work.

OnSelect: triggered when selecting a file, the function has three parameters

    • Event: Events object.
    • Queueid: A unique identifier for the file, consisting of 6 random characters.
    • Fileobj: The selected file object has a name, size, CreationDate, Modificationdate, type 5 properties.

The code is as follows:

1 2 3 4 5 6 7 8 9 Ten One A - - the - - - + - + A at - $ (document). Ready (function () {$ ("#uploadify"). Uploadify ({ ' uploader ': ' js/jquery.uploadify-v2.1.0/uploadify.swf ', ' script ': ' uploadhandler.ashx ', ' cancelimg ': ' js/jquery.uploadify-v2.1.0/cancel.png ', ' folder ': ' uploadfile ', ' queueid ': ' filequeue ', ' auto ': false, ' multi ': true, ' onInit ':function () {alert ("1");}, ' onSelect ': function (e, Queueid, fileobj) {alert ("Unique ID:" + queueid + "\ r \ n" + "file name:" + fileobj.name + "\ r \ n" + "File size:" + fileobj.size + "\ r \ n" + "Creation time:" + fileobj.creationdate + "\ r \ n" + "Last modified:" + fileobj.modificationdate + "\ r \ n" + "File type:" + fileobj.type );  } });});

When you select a file, the message pops up like this:

2010-12-29_121000

Onselectonce: Triggered when a file is selected in a single file or multiple file upload. The function has two parameters Event,data,data object has the following properties:

    • FileCount: Select the total number of files.
    • filesselected: Select the number of files at the same time, if you select 3 files at a time, the property value is 3.
    • Filesreplaced: If A and b two files already exist in the file queue, select a and B when selecting the file again, and the property value is 2.
    • Allbytestotal: The total size of all selected files.

OnCancel: Triggered when you click the Close button of a file in the file queue or click Cancel upload. The function has event, Queueid, Fileobj, data four parameters, the first three parameters and onselect in three parameters, the data object has two properties FileCount and Allbytestotal.

    • FileCount: The number of files remaining in the file queue after a file is canceled.
    • Allbytestotal: The size of the remaining files in the file queue after canceling a file.

Onclearqueue: Triggered when the function fileuploadclearqueue is called. There are two parameters for event and data, and two corresponding parameters in OnCancel.

Onqueuefull: Triggered when Queuesizelimit is set and the number of files selected exceeds the value of Queuesizelimit. The function has two parameters of event and Queuesizelimit.

OnError: Triggered when an error occurs during upload. The function has the event, Queueid, Fileobj, errorobj four parameters, of which the first three parameters, Errorobj object has type and info two properties.

    • Type: Error types, there are three kinds of ' HTTP ', ' IO ', or ' Security '
    • Info: Description of the error

OnOpen: Triggered when the upload is clicked, if Auto is set to true, it is triggered when the file is selected, and if more than one file is uploaded, the entire file queue is traversed. The function has the event, Queueid, fileobj three parameters, the parameter is interpreted as above.

OnProgress: Triggered when the upload is clicked, if Auto is set to true, it is triggered when the file is selected, and if more than one file is uploaded, it traverses the entire file queue and fires after OnOpen. This function has event, Queueid, Fileobj, data four parameters, the first three parameters are explained above. The data object has four properties percentage, bytesloaded, allbytesloaded, Speed:

    • Percentage: Percentage of current completion
    • Bytesloaded: The size of the current upload
    • Allbytesloaded: The size of the file queue that has already been uploaded
    • Speed: Upload Rate kb/s

OnComplete: Triggers when file upload is complete. The function has four parameters event, Queueid, Fileobj, response, data five parameters, the first three parameters ibid. Response is the value returned by the spooler, in the example above, 1 or 0,data has two properties FileCount and speed

    • FileCount: The number of files remaining without uploading completed.
    • Speed: Average rate of file uploads kb/s

Note: The Fileobj object is somewhat different from the one mentioned above, and the OnComplete Fileobj object has a filepath attribute to remove the path to the uploaded file.

Onallcomplete: Triggers when all files in the file queue are uploaded. The function has an event and data two parameters, and data has four properties, respectively:

    • Filesuploaded: The number of uploaded files.
    • Errors: The number of errors occurred.
    • Allbytesloaded: The total size of all uploaded files.
    • Speed: Average upload rate kb/s

Introduction to related functions

In the above example, Uploadifyupload and uploadifyclearqueue two functions have been used, in addition to several functions:

Uploadifysettings: You can dynamically modify the key values described above, such as the following code

1 $ (' #uploadify '). Uploadifysettings ('folder ',' JS ');

If the Upload button event is written as follows, the file will be uploaded to the directory defined in the Uploadifysettings

1 2 <a href= "javascript:$ (' #uploadify '). Uploadifysettings (' folder ',' JS '); $ (' #uploadify '). Uploadifyupload () "> Upload </a>

Uploadifycancel: The function accepts a queueid as a parameter that cancels the file specified Queueid in the file queue.

1 $ (' #uploadify '). Uploadifycancel (ID);

jquery Upload plugin uploadify use details (forward the original author Feng Wei)

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.