This article will bring you a very handsome jquery upload plug-in, ASP. NET version. This plug-in is implemented by Uploadify and has a progress display.
First download this plug-in from Uploadify:
Official download
Official documentation
Official demo
After the download, follow these steps 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 JQueryUploadHandler. 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:
Code [http://www.xueit.com] <Head runat = "server">
<Title> Uploadify </title>
<Link href = "JS/jquery. uploadify-v2.1.0/example/css/default.css"
Rel = "stylesheet" type = "text/css"/>
& Lt; link href = & quot; JS/jquery. uploadify-v2.1.0/uploadify.css & quot"
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 ({
'Upload': 'JS/jquery. uploadify-v2.1.0/uploadify.swf ',
'Script': 'uploadhandler. ashx ',
'Cancelim': 'js/jquery. uploadify-v2.1.0/cancel.png ',
'Folder': 'uploadfile ',
'Queue id': '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>
5 The ProcessRequest method code of the UploadHandler class is as follows:
Code [http://www.xueit.com] 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 display of the upload queue will not disappear automatically after the upload is successful.
Context. Response. Write ("1 ");
}
Else
{
Context. Response. Write ("0 ");
}
}
6
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: The relative path of the uploadify.swf file. This swf file is a button with a text BROWSE. After clicking it, it fades out the open file dialog box. Default Value: uploadify.swf.
Script: The relative path of the background processing program. Default Value: uploadify. php
CheckScript: used to determine whether the selected file to be uploaded is in the relative path of the background processing program on the server
FileDataName: Set a name based on the name in the server handler to obtain the data of the uploaded file. The default value is Filedata.
Method: The default submission method is Post or Get.
ScriptAccess: the access mode of the flash script file. If you set it to always in a local test, the default value is sameDomain.
Folder: directory where the uploaded files are stored.
QueueID: ID of the file queue, which is consistent with the ID of the div storing 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 file selection box is displayed as follows:
FileExt: Set the file type that can be selected. The format is '*. doc; *. pdf; *. rar '.
SizeLimit: Specifies the size limit of the file to be uploaded.
SimUploadLimit: the number of simultaneous uploads allowed. Default Value: 1.
ButtonText: the text of the browser button. Default Value: BROWSE.
ButtonImg: Path of the image of the browser button.
HideButton: if it 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, the result is reversed when you move the cursor over the Browse button.
Width: Set the width of the browser button. Default Value: 110.
Height: Set the height of the Browse button. Default Value: 30.
Wmode: If this parameter is set to transparent, the flash background file of the browser button is transparent, and the flash file is set to the top level of the page. Default Value: opaque.
CancelImg: select the close button icon for each file after the file is added to 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.
Event: event object.
QueueID: the unique identifier of a file. It consists of 6 random characters.
FileObj: Selected file object, which has five attributes: name, size, creationDate, modificationDate, and type.
The Code is as follows:
Code [http://www.xueit.com] $ (document). ready (function ()
{
$ ("# Uploadify"). uploadify ({
'Upload': 'JS/jquery. uploadify-v2.1.0/uploadify.swf ',
'Script': 'uploadhandler. ashx ',
'Cancelim': 'js/jquery. uploadify-v2.1.0/cancel.png ',
'Folder': 'uploadfile ',
'Queue id': '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. This function has two parameters, event, and data, which have the following attributes:
FileCount: Total number of selected files.
FilesSelected: select the number of files at the same time. If three files are selected at a time, the attribute value is 3.
FilesReplaced: If two files A and B exist in the file queue, select A and B again when selecting the file again. The attribute value is 2.
AllBytesTotal: 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. This function has four parameters: event, queueId, fileObj, and data. The first three parameters are the same as the three parameters in onSelect. The data object has two attributes: fileCount and allBytesTotal.
FileCount: number of remaining files in the file queue after a file is canceled.
AllBytesTotal: the size of the remaining files in the file queue after a file is canceled.
OnClearQueue: triggered when the fileUploadClearQueue function is called. There are two parameters, event and data, which correspond to two parameters in onCancel.
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.
Type: indicates the type of the Error. There are three types: 'http', 'io', or 'security'
Info: Error description
OnOpen: 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. 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:
Percentage: percentage of current completions
BytesLoaded: Current upload size
AllBytesLoaded: size of the uploaded file queue
Speed: the upload speed is kb/s.
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.
FileCount: the number of files that have not been uploaded.
Speed: Average File Upload rate kb/s
OnAllComplete: triggered when all files in the file queue are uploaded. This function has two parameters: event and data. data has four attributes:
FilesUploaded: Number of all uploaded files.
Errors: number of errors.
AllBytesLoaded: total size of all uploaded files.
Speed: Average upload speed kb/s
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); well, this plug-in is basically used up.
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
