Download the sample code in the Jqueryelement sample download section of the Download download resource (cloud-Habitat community download)
This article explains the features of the Uploader control and the considerations and tips for using it, as follows:
* Prepare
* Create save page
* Add FileUpload Control
* Set EnableSessionState
* Call the Uploader Save method
* Create a page to get progress
* Create upload page
* Settings Save page
* Set the page to get progress
* Upload
* Hide Save page
Get ready
Please ensure that the latest version of Jqueryelement is downloaded in the JQueryElement.dll download section of the Download download resource.
Use the directive to refer to the following namespaces:
Copy Code code as follows:
<%@ Register assembly= "Zoyobar.shared.panzer.JQueryElement"
Namespace= "Zoyobar.shared.panzer.ui.jqueryui.plusin"
Tagprefix= "Je"%>
<%@ Register assembly= "Zoyobar.shared.panzer.JQueryElement"
Namespace= "Zoyobar.shared.panzer.web.jqueryui"
Tagprefix= "Je"%>
In addition to namespaces, you need to refer to jQueryUI scripts and styles and include a custom style jQueryUI in the JQueryElement.dll download section of the Download download resource, and if you need more styles, you can http://j Queryui.com/download Downloads: In addition to namespaces, you need to refer to jQueryUI scripts:
Copy Code code as follows:
<link type= "Text/css" rel= "stylesheet" href= "[Style path]/jquery-ui-<version>.custom.css"/>
<script type= "Text/javascript" src= [Script path]/jquery-<version>.min.js] ></script>
<script type= "Text/javascript" src= [Script path]/jquery-ui-<version>.custom.min.js] ></script>
Create a Save page
Save the page is a simple page, the main completion of the file save work, save the page will not submit itself, but by the upload page submitted.
Add FileUpload Control
First, add the FileUpload control to the save page:
Copy Code code as follows:
<form id= "Formfileupload" runat= "Server" >
Uploading: <asp:fileupload id= "file" runat= "Server"/>
</form>
You can also add an INPUT element of type property to file:
Copy Code code as follows:
<form id= "Formfileupload" runat= "Server" enctype= "Multipart/form-data" >
Uploading: <input type= "file" id= "file" runat= "Server"/>
</form>
If you use the INPUT element, you may need to set the Enctype property of the form to Multipart/form-data.
Set EnableSessionState
You need to set the save page EnableSessionState to ReadOnly so that you can request a page to get progress when you save the page to save the file. This is mainly due to the asp.net sequential execution of pages that can read and write sessions:
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true"
Codefile= "FileUpload.aspx.cs" inherits= "Uploader_fileupload"
Enablesessionstate= "ReadOnly"%>
Invoke the Save method for Uploader
In the Page_Load method for saving the page, call the Save static method of the Uploader control to save the file:
Copy Code code as follows:
protected void Page_Load (object sender, EventArgs e)
{
if (this. IsPostBack && This.file.HasFile)
TODO: The Waitsecond parameter is set here to show the progress of the upload during the test.
In actual use please do not set Waitsecond, and adjust buffersize to a reasonable value.
Uploader.save (
This. Server.MapPath (@ "~/uploader/photo.jpg"),
This.file.PostedFile,
This. session["Myphotouploadinfo"] as Uploader.uploadinfo,
1,
1);
Uploader.save (
This. Server.MapPath (@ "~/uploader/photo.jpg"),
This.file.PostedFile,
This. session["Myphotouploadinfo"] as Uploader.uploadinfo);
}
Code, the IsPostBack and HasFile properties determine that the user submits the file before saving it.
The Save method is in the form of Save (string FilePath, Httppostedfile postedfile, uploader.uploadinfo uploadinfo, int buffersize, int waitsec ond), filePath parameter is the full path to file save, PostedFile parameter is a Httppostedfile object that provides file control, can be obtained from the FileUpload control, and the Uploadinfo parameter is the object that holds the upload progress information, buf The Fersize parameter is the cache size when the file is saved, the default 128kb is saved once, and the last parameter waitsecond is used only at test time, indicating the wait time after the cache is saved, so that you can see progress.
To upload files larger than 4MB, modify the web.config maxRequestLength to refer to http://msdn.microsoft.com/zh-cn/library/e1f13641 (v=vs.71). aspx.
Create a page to get progress
Objects that contain progress information are saved in the session, so you can get progress information from the session at any time: uploader.uploadinfo
Copy Code code as follows:
<%@ WebHandler language= "C #" class= "Uploader_getprec"%>
Using System.Collections.Generic;
Using System.Web;
Using System.Web.Script.Serialization;
Using System.Web.SessionState;
Using Zoyobar.shared.panzer.ui.jqueryui.plusin;
public class Uploader_getprec:ihttphandler,
Ireadonlysessionstate
{
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/javascript";
Context. Response.Cache.SetNoStore ();
Uploader.uploadinfo info =
Context. session["Myphotouploadinfo"] as Uploader.uploadinfo;
sorteddictionary<string, object> json =
New sorteddictionary<string, object> ();
if (null = = info)
Json. ADD ("Prec", "-");
Else
{
Json. ADD ("Prec", info. Percent);
Json. ADD ("Total", info.) ContentLength);
Json. ADD ("posted", info. Postedlength);
if (info. Percent = 100)
Json. ADD ("url", "photo.jpg");
/*
* {
* "Prec": 20.23
* "Total": 2000,
* "posted": 2
* }
* */
}
Context. Response.Write (
New JavaScriptSerializer (). Serialize (JSON)
);
}
It should be noted that UPLOADER_GETPREC implements the interface ireadonlysessionstate instead of IRequiresSessionState. The reason is similar to setting EnableSessionState for ReadOnly. As for how to return JSON data, refer to returning JSON in a different. NET version.
Create an upload page
The final step is to create an upload page that adds uploader controls to the page:
Copy Code code as follows:
<je:uploader id= "Uploader" runat= "Server" isvariable= "true"
Uploadurl= "Fileupload.aspx"
Progressurl= "Getprec.ashx" progresschanged= "
function (data) {
if (-:d Ata.prec = '-')
$ (' #prec '). Text (' No progress! ')
Else
if (-:d Ata.prec = = 100) {
$ (' #prec '). Text (' Completed, picture path is: ' +-:d ata.url);
Pb.hide ();
$ (' #photo '). Show (). attr (' src ',-:d ata.url);
}
else{
$ (' #prec '). Text (-:d ata.posted +
' bytes/' +-:d ata.total + ' bytes, ' +
-:d Ata.prec + '% ');
Pb.progressbar (' option ', ' value ',-:d ata.prec);
}
}
">
</je:Uploader>
<je:button id= "Cmdupload" runat= "Server" isvariable= "true"
Label= "Start" click= "
function () {
Cmdupload.hide ();
Uploader.__uploader (' hide '). __uploader (' upload ');
Pb.show ();
} ">
</je:Button>
Set Save page
Through the Uploader Uploadurl property, you can choose to save the page, in the example, select the page fileupload.aspx, which automatically generates an IFRAME element, and the SRC attribute of the IFRAME points to the fileupload.aspx page .
You can also customize an IFRAME and then select this iframe through the upload property:
Copy Code code as follows:
<iframe id= "Myiframe" src= "fileupload.aspx" ></iframe>
<je:uploader id= "Uploader" runat= "Server" isvariable= "true"
Upload= "#myIFrame"
... >
</je:Uploader>
Set up a page to get progress
The upload progress can be obtained and displayed through the properties Progressurl and ProgressChanged, progressurl the page address that returns the progress information, and progresschanged is used to process information such as the progress of the return.
Additionally, the Progressinterval property represents the time interval for the query progress, and defaults to 1000 milliseconds.
Upload
Call the uploader upload method to trigger the upload operation:
Copy Code code as follows:
<je:button id= "Cmdupload" runat= "Server" isvariable= "true"
Label= "Start" click= "
function () {
Uploader.__uploader (' upload ');
} ">
</je:Button>
By default, a submit operation is performed on the first form of the saved page, and you can adjust the index of the form you want to submit by using the Uploadform property.
Hide Save page
You can hide the save page by calling the uploader hide method:
Copy Code code as follows:
Uploader.__uploader (' upload ');
jqueryelement is an Open-source shared code that can be downloaded from a DLL or source code on a http://code.google.com/p/zsharedcode/wiki/Download page.
actual Process Demo: http://www.tudou.com/programs/view/-Zvwz5xsih8/, recommended Full-screen viewing.
Welcome to Panzer Open Source project, http://zsharedcode.googlecode.com/, which contains Iebrowser control WebBrowser perform various JS and jQuery scripts as well as recording functions and jQueryUI asp.net control jqueryelement, Weibo: Http://t.qq.com/zoyobar
