Home > Developer > Web Develop
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.
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
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:
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.
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.
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:
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
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:
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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
