Uploadify is a jquery upload plugin, the implementation of the effect is very good, with progress display. However, the official examples provided in PHP version of this article will detail the use of uploadify in the ASPNET, you can also click on the link below for demonstration or download.
First, follow the steps below to achieve a simple upload function.
1 Create a Web project, named Jqueryuploaddemo, to download the latest version from the official web and add it to the project after decompression.
2 Add the Uploadhandler.ashx file to the project to process the upload of the file.
3 Add the UploadFile folder to the project to store the uploaded files.
After completing the three steps above the basic structure of the project is as follows:
The code for the 4 Default.aspx HTML page is modified as follows:
5 The ProcessRequest method code for 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);
The following code is missing, upload the queue after the success of the display will not automatically disappear the context
. Response.Write ("1");
}
else
{context
. Response.Write ("0");
}
6 after the operation effect of the following figure:
7 Select two files, click Upload, you can see the UploadFile folder will add these two files.
The above simple implementation of an upload function, depending on the function uploadify implementation, the Uploadify function parameter is 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, here's what these key values mean:
uploader:uploadify.swf file relative path, the SWF file is a text browse button, click and Fade Open File dialog box, default: uploadify.swf.
Script: The relative path of the background handler. Default value: uploadify.php
Checkscript: Used to determine the relative path of a background handler that uploads selected files to the presence of the server
Filedataname: Sets a name, in the server handler according to the name to fetch the data of the uploaded file. Default is Filedata
Method: Submit to post or get defaults to post
Scriptaccess:flash script file access mode, if the local test is set to always, default value: Samedomain
Folder: The directory where the uploaded files are stored.
Queueid: ID of the file queue, which is the same as the ID of the div that holds the file queue.
Queuesizelimit: When multiple file generation is allowed, set the number of selected files, the default value: 999.
Multi: Multiple files can be uploaded when set to True.
Auto: Set to True when the file is selected directly uploaded, for false need to click the Upload button to upload.
Filedesc: This property value must set the Fileext property before it is valid to set the prompt text in the Select File dialog box, such as setting Filedesc as "Please select RAR doc PDF File", the effect of opening the file selection box is as follows:
Fileext: Sets the type of file that can be selected, in the format of: ' *.doc;*.pdf;*.rar '.
SizeLimit: Size limit for uploading files.
Simuploadlimit: Allow simultaneous upload of the number of defaults: 1.
ButtonText: The text of the browse button, default: Browse.
BUTTONIMG: The path to the picture of the browse button.
Hidebutton: Set to True hides the picture of the browse button.
Rollover: A value of true and false, when set to true, has a reversal effect when the mouse is moved over the browse button.
Width: Sets the navigation button widths, the default value: 110.
Height: Sets the browse button heights, default value: 30.
Wmode: Set this as transparent to make the flash background file transparent for the browse button, and the Flash file will be placed at the top level of the page. Default value: Opaque.
CANCELIMG: Select the Close button icon on each file in the file queue, as shown in the following figure:
The value of key values described above is either a string or a Boolean type, which is simpler, and the value of the key to be introduced next is a function that can return some information to the user when selecting a file, error, or other action.
OnInit: Do some initialization work.
Onselect: Triggers when selecting a file, which has three parameters
Event: Events object.
Queueid: A unique identification of the file, consisting of 6 random characters.
Fileobj: Selected file object with name, size, CreationDate, Modificationdate, type 5 properties.
The code is as follows:
$ (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" +
"FileName:" + fileobj.name + "\ r \ n" +
"File size:" + fileobj.size + "\ r \ n" +
"Create Time:" + fileobj.creationdate + "\ r \ n" + "
Last Modified Time:" + fileobj.modificationdate + "\ r \ n" +
"file type:" + Fileobj.type
);
}
})
;
The message that pops up when you select a file is the following image:
onselectonce: When a single file or multiple file upload, select the file when the trigger. The function has two parameters event,data,data the object has the following several properties:
- FileCount: Select the total number of files.
- filesselected: Select the number of files at the same time, if 3 files selected at a time the property value is 3.
- Filesreplaced: If A and b two files already exist in the file queue, A and B are selected when the file is selected again, and the property value is 2.
- Allbytestotal: The total size of all selected files.
OnCancel: trigger when clicking on the Close button of file in file queue or clicking Cancel upload. The function has event, Queueid, Fileobj, data four parameters, the first three parameters with three parameters in Onselect, the data object has two properties FileCount and Allbytestotal.
- FileCount: After canceling a file, the number of files remaining in the file queue.
- Allbytestotal: The size of the remaining files in the file queue after a file is canceled.
Onclearqueue: triggered when a function fileuploadclearqueue is called. There are event and data two parameters, with two corresponding parameters in the OnCancel.
onqueuefull: triggered when Queuesizelimit is set and the number of files selected exceeds the Queuesizelimit value. The function has two arguments event and Queuesizelimit.
OnError: triggered when an error occurs during the upload process. 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: Wrong types, three kinds of ' HTTP ', ' IO ', or ' security '
- Info: Description of the error
onOpen: Click on upload Trigger, if the auto set to True is to select the file trigger, if more than one file upload will traverse the entire file queue. The function has three parameters of event, Queueid and Fileobj, and the parameters are explained as above.
onprogress: Click on upload Trigger, if the auto set to True is to select the file trigger, if there are multiple file uploads traverse the entire file queue, triggered after OnOpen. The 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 that has been uploaded in the file queue
- Speed: Upload Rate kb/s
OnComplete: triggered after file upload completes. The function has four parameters event, Queueid, Fileobj, response, data five parameters, the first three parameters ibid. Response the value returned for the spooler, in the example above 1 or 0,data has two attributes FileCount and speed
- FileCount: The number of files remaining without upload completed.
- Speed: Average rate of file uploads kb/s
Note: The Fileobj object is somewhat different from what is mentioned above, and OnComplete Fileobj object has a FilePath property that can take the path of the uploaded file.
Onallcomplete: triggered after all files in the file queue have been uploaded. The function has event and data two parameters, and data has four properties, respectively:
- Filesuploaded: The number of files uploaded.
- Errors: Number of errors occurred.
- allbytesloaded: Total size of all uploaded files.
- Speed: Average upload rate kb/s
Introduction to related functions
Uploadifyupload and Uploadifyclearqueue Two functions have been used in the above example, and there are several other functions:
uploadifysettings: You can dynamically modify the key values described above, such as the following code
$ (' #uploadify '). Uploadifysettings (' folder ', ' JS ');
If the event of the upload button is written as follows, the file will be uploaded to the uploadifysettings defined directory
<a href= "javascript:$ (' #uploadify '). Uploadifysettings (' folder ', ' JS ');
$ (' #uploadify '). Uploadifyupload () "> Upload </a>
uploadifycancel: This function takes a queueid as an argument and can cancel the file specified Queueid in the file queue.
$ (' #uploadify '). Uploadifycancel (ID);
Finally finished, to jquery this upload plugin also basic understanding, hope for everyone to help, the wrong place also hope everyone corrected.