Uploadify is an upload plug-in of jquery. It achieves very good results with progress display. However, the official PHP version of the instance is provided. This article describes how to use uploadify in ASPnet. You can also click the link below to demonstrate or download it.
First, follow the steps below to implement a simple upload function.
1. Create a web project named jqueryuploaddemo. download the latest version from the official website, decompress it, and add it to the project.
2. Add the uploadhandler. ashx file to the project to process file uploads.
3. Add the uploadfile folder to the project to store uploaded files.
The basic structure of the project after completing the preceding three steps is as follows:
4 modify the code of the default. aspx HTML page as follows:
<HTML xmlns = "http://www.w3.org/1999/xhtml">5 The processrequest method code of the uploadhandler class is as follows:
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); // if the following code is missing, the context will not automatically disappear after the upload queue is successfully displayed. response. write ("1");} else {context. response. write ("0 ");}}6. The effect after running is as follows:
7. After selecting two files, Click Upload. The two files will be added to the uploadfile folder.
The above is a simple upload function, which relies on the uploadify function. The parameters of the uploadify function are in JSON format and can be customized by modifying the key value of the JSON object, for example, if multi is set to true or false to control whether multi-File Upload can be performed, the following describes the meanings of these key values:
Uploader: Relative path of the uploadify.swf file. The SWF file is a button with a text browse. After clicking it, it fades out and opens the file dialog box. Default Value: uploadify.swf.
Script: Relative path of the background processing program. Default Value: uploadify. php
Checkscript: Used to determine the relative path of the background processing program for uploading the selected file on the server
Filedataname: Set a name to retrieve the data of the uploaded file in the server handler. The default value is filedata.
Method: The default submission mode is post or get.
Scriptaccess:The access mode of the flash script file. If it is set to always in a local test, the default value is samedomain.
Folder:The directory where the uploaded files are stored.
Queueid:The ID of the file queue, which is consistent with the ID of the DIV that stores the file queue.
Queuesizelimit:When multiple files are allowed to be generated, set the number of selected files. Default Value: 999.
Multi:When set to true, multiple files can be uploaded.
Auto:Set to true. When a file is selected, it is uploaded directly. If it is set to false, You need to click the upload button to upload the file.
Filedesc:This attribute value is valid only after the fileext attribute is set. It is used to set the prompt text in the Select File Dialog Box. For example, if filedesc is set to "select RAR Doc PDF file", the effect of opening the file selection box is as follows:Fileext:Set the file type that can be selected, in the format of '*. Doc; *. pdf; *. rar '.
Sizelimit:The size limit of the uploaded file.
Simuploadlimit:The default value is 1.
Buttontext:The text of the Browse button. Default Value: browse.
Buttonimg:The path of the Browse button.
Hidebutton:If this parameter is set to true, the image of the Browse button is hidden.
Rolover:The values are true and false. If it is set to true, a reverse effect is displayed when you move the cursor over the Browse button.
Width:Set the browser button width. Default Value: 110.
Height:Set the height of the Browse button. Default Value: 30.
Wmode:Setting this parameter to transparent can make the flash background file of the browser button transparent, and the flash file will be set to the top level of the page. Default Value: opaque.
Cancelimg: Select the close button icon for each file after the file is in the file queue, for example:The value of the key value described above is a string or boolean type, which is relatively simple. The value of the key value to be introduced is a function, you can return some information to the user when selecting files, errors, or other operations.
Oninit:Perform initialization..
Onselect:Triggered when a file is selected. This function has three parameters.
The Code is as follows:
$ (Document ). ready (function () {$ ("# uploadify "). uploadify ({'uploader': 'js/jquery. uploadify-v2.1.0/uploadify.swf ', 'script': 'uploadhandler. ashx', 'canonicalmg ': '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 identifier: "+ queueid +" \ r \ n "+" file name: "+ fileobj. name + "\ r \ n" + "file size:" + fileobj. size + "\ r \ n" + "creation time:" + fileobj. creationdate + "\ r \ n" + "last modification time:" + fileobj. modificationdate + "\ r \ n" + "file type:" + fileobj. type );}});});
The pop-up message after selecting a file is as follows:
Onselectonce: Triggered when a single file or multiple files are uploaded and selected. This function has two parameters, event, and data, which have the following attributes:
Oncancel:This is triggered when you click the close button of a file in the file queue or click Cancel upload. This function has four parameters: event, queueid, fileobj, and data. The first three parameters are the sameOnselectThe data object has two attributes: filecount and allbytestotal.
Onclearqueue :Triggered when the fileuploadclearqueue function is called. There are two parameters: Event and data.OncancelTwo corresponding parameters in.
Onqueuefull:Triggered when queuesizelimit is set and the number of selected files exceeds the value of queuesizelimit. This function has two parameters: Event and queuesizelimit.
Onerror:Triggered when an error occurs during the upload process. This function has four parameters: event, queueid, fileobj, and errobj. The first three parameters are the same as above. The errobj object has two attributes: type and info.
Onopen:Trigger upon clicking upload. If auto is set to true, It is triggered when a file is selected. If multiple files are uploaded, the entire file queue is traversed. This function has three parameters: event, queueid, and fileobj. The parameters are interpreted as the same as above.
Onprogress: Triggered when you Click Upload. If auto is set to true, It is triggered when you select a file. If multiple files are uploaded, the entire file queue is traversed and triggered after onopen. This function has four parameters: event, queueid, fileobj, and data. The first three parameters are interpreted as the same as above. Data Objects have four attributes: percentage, bytesloaded, allbytesloaded, and speed:
Oncomplete: Triggered after the file is uploaded. This function has four parameters: event, queueid, fileobj, response, and data. The first three parameters are the same as above. Response is the value returned by the background processing program. In the preceding example, response is 1 or 0. Data has two attributes: filecount and speed.
Note: The fileobj object is not the same as the above mentioned. The fileobj object of oncomplete has a filepath attribute to retrieve the path of the uploaded file.
Onallcomplete:Triggered when all files in the file queue are uploaded. This function has two parameters: Event and data. Data has four attributes:
Related functions
In the preceding example, the uploadifyupload and uploadifyclearqueue functions are used. In addition, there are several functions:
Uploadifysettings: You can dynamically modify the key values described above, as shown in the following code:
$('#uploadify').uploadifySettings('folder','JS');
If the upload button event is written as follows, the file will be uploaded to the directory defined by uploadifysettings.
<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$ ('# Uploadify'). uploadifyupload () "> upload </a>
Uploadifycancel:This function accepts a queueid as the parameter. You can cancel the file specified by queueid in the file queue.
$('#uploadify').uploadifyCancel(id);
From: http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html
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
