First full enjoy:
In the previous article, there are similar cases with a progress bar file transmission, you can read the previous article to expand the knowledge point.
Part of the code:
<%@ Page language= "C #"%> <%@ Register assembly= "MattBerseth.WebControls.AJAX" MattBerseth.WebControls.AJAX.Progress "tagprefix=" MB%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat=" Server "> <title>untitled page</t itle> <link rel= "Stylesheet" href= "_assets/css/progress.css" mce_href= "_assets/css/progress.css"/> < Link rel= "Stylesheet" href= "_assets/css/upload.css" mce_href= "_assets/css/upload.css"/> <mce:style type= "text
/css "><!--body{font-family:arial, Sans-serif; font-size:12px;} --></mce:style><style type= "Text/css" mce_bogus= "1" > body{font-family:arial, Sans-Serif
: 12px;} </style> <mce:script type= "text/c#" runat= "Server" ><!--protected void Page_Load (object sender, Event Args Args) {if (!this). IspostbaCK) {this.
session["Uploadinfo"] = new Uploadinfo {IsReady = false}; }///<summary>//////</summary> [System.Web.Services.WebMethod] [System.Web.Script.Services . Scriptmethod] public static object Getuploadstatus () {//Get file length uploadinfo info = httpcontext.current.session["UPL
Oadinfo "] as Uploadinfo; if (info!= null && info. IsReady) {int sofar = info.
Uploadedlength; int total = info.
ContentLength;
int percentcomplete = (int) math.ceiling (double) Sofar/(Double) total * 100); String message = String. Format ("Upload {0} ...") {1} of {2} bytes ', info.
FileName, Sofar, total);
Returns a percent return of new {PercentComplete = percentcomplete, message = message};
//Not ready yet ... return null; }//--></mce:script> </head> <body> <form id= "Form1" runat= "Server" > <asp:script Manager id= "ScriptManager" runat= "Server" enablepagemethods= "true"/> <mce:script type= "Text/javascript";<!--var intervalid = 0;
var ProgressBar;
var fileupload;
var form;
progress bar Function Pageload () {$addHandler ($get (' upload '), ' click ', Onuploadclick);
ProgressBar = $find (' progress ');
}//Registration Form function register (form, fileupload) {this.form = form;
This.fileupload = FileUpload;
}//upload validation function Onuploadclick () {var vaild = fileUpload.value.length > 0;
if (vaild) {$get (' upload '). Disabled = ' disabled ';
Updatemessage (' info ', ' Initialize upload ... ');
Submit upload form.submit ();
Hide Frame Sys.UI.DomElement.addCssClass ($get (' Uploadframe '), ' hidden ');
0 start showing progress bar progressbar.set_percentage (0);
Progressbar.show (); Upload process intervalid = window.setinterval (function () {Pagemethods.getuploadstatus (function (Result) {if (result) {//More
The new progress bar is the new value progressbar.set_percentage (Result.percentcomplete);
Update information updatemessage (' info ', result.message);
if (result = = 100) {//Automatically disappears Window.clearinterval (intervalid);
}
}
});
}, 500);
} else{ OnComplete (' Error ', ' You must select a file ');
} function OnComplete (type, msg) {//Automatically disappears Window.clearinterval (intervalid);
Display message updatemessage (type, msg);
Hide Progress bar progressbar.hide ();
Progressbar.set_percentage (0);
Re-enable button $get (' upload '). Disabled = ';
Display Frame Sys.UI.DomElement.removeCssClass ($get (' Uploadframe '), ' hidden ');
function Updatemessage (type, value) {var status = $get (' status ');
status.innerhtml = value;
Remove style status.classname = ';
Sys.UI.DomElement.addCssClass (status, type);
}//--></mce:script> <div> <div class= "Upload" > <h3> file Upload </h3> <div> <iframe id= "uploadframe" frameborder= "0" scrolling= "no" src= "upload.aspx" mce_src= "upload.aspx" ></iframe > <mb:progresscontrol id= "Progress" runat= "cssclass=" LightBlue "style=" Display:none "mce_style=" Display:none "value=" 0 "mode=" Manual "speed=". 4 "width=" 100% "/> <div> <div id=" status "class="Info > Please select the file to upload </div> <div class= "Commands" > <input id= "Upload" type= "button" value= "Upload"/> ;/div> </div> </div> </div> </div> </form> </body> </html>
upload.aspx:
Limit size 1M protected void Page_load2 (object sender, EventArgs e) {if (this. IsPostBack) {Uploadinfo Uploadinfo = this.
session["Uploadinfo"] as Uploadinfo; if (Uploadinfo = = null) {//Let the parent page know cannot process upload const string JS = "Window.parent.onComplete (' error ', ' cannot upload file.)
Please refresh the page and try again);
Scriptmanager.registerstartupscript (This, typeof (Upload_aspx), "Progress", JS, True);
else {//Let the service side know we're not ready yet.
Uploadinfo.isready = false; Upload verification if (this.fileUpload.PostedFile!= null && this.fileUpload.PostedFile.ContentLength > 0 && This.fileUpload.PostedFile.ContentLength < 1048576)//Limited 1M {//set path string path = this.
Server.MapPath (@ "uploads");
String fileName = Path.getfilename (this.fileUpload.PostedFile.FileName);
Upload information uploadinfo.contentlength = this.fileUpload.PostedFile.ContentLength;
Uploadinfo.filename = FileName;
uploadinfo.uploadedlength = 0;
File exists initialization ... uploadinfo.isready = true; cache int buffersize = 1;
byte[] buffer = new Byte[buffersize]; Save byte using (FileStream fs = new FileStream (Path.Combine (Path, FileName), FileMode.Create)) {while (uploadinfo.up Loadedlength < Uploadinfo.contentlength) {//from input into buffer int bytes = This.fileUpload.PostedFile.InputStream.Read (bu
Ffer, 0, buffersize); Bytes are written to the file stream fs.
Write (buffer, 0, bytes);
Update size Uploadinfo.uploadedlength + = bytes;
Thread sleep uploads are slower so you can see the progress bar System.Threading.Thread.Sleep (100);
}//Delete.
File.delete (Path.Combine (Path, fileName));
Let the parent page know has been processed upload const string js = "Window.parent.onComplete (' success ', ' {0} has been successfully uploaded ');"; Scriptmanager.registerstartupscript (This, typeof (Upload_aspx), "Progress", string.
Format (JS, fileName), true); else {if (this.fileUpload.PostedFile.ContentLength >= 1048576)//1m {const string js = ' Window.parent.onCo
Mplete (' error ', ' exceed upload file limit size, please choose again '); ";
Scriptmanager.registerstartupscript (This, typeof (Upload_aspx), "Progress", JS, True); }
else {const string JS = ' window.parent.onComplete (' error ', ' Upload file error ');
Scriptmanager.registerstartupscript (This, typeof (Upload_aspx), "Progress", JS, True);
} Uploadinfo.isready = false; }}//Do not limit size protected void Page_Load (object sender, EventArgs e) {if (this. IsPostBack) {Uploadinfo Uploadinfo = this.
session["Uploadinfo"] as Uploadinfo;
Uploadinfo.isready = false; if (this.fileUpload.PostedFile!= null && this.fileUpload.PostedFile.ContentLength > 0) {string path = Thi
S.server.mappath (@ "uploads");
String fileName = Path.getfilename (this.fileUpload.PostedFile.FileName);
Uploadinfo.contentlength = This.fileUpload.PostedFile.ContentLength;
Uploadinfo.filename = FileName;
uploadinfo.uploadedlength = 0;
Uploadinfo.isready = true;
int buffersize = 1;
byte[] buffer = new Byte[buffersize]; using (FileStream fs = new FileStream (Path.Combine (Path, FileName), FileMode.Create)) {while (uploadinfo.uploadedLength < uploadinfo.contentlength) {int bytes = this.fileUpload.PostedFile.InputStream.Read (buffer, 0, buffersize)
; Fs.
Write (buffer, 0, bytes);
Uploadinfo.uploadedlength + = bytes;
} const String js = "Window.parent.onComplete (' success ', ' {0} successfully uploaded ');"; Scriptmanager.registerstartupscript (This, typeof (Upload_aspx), "Progress", string.
Format (JS, fileName), true);
else {const string JS = ' window.parent.onComplete (' error ', ' Upload file error ');
Scriptmanager.registerstartupscript (This, typeof (Upload_aspx), "Progress", JS, True);
} Uploadinfo.isready = false; }
}
Code is not posted, directly on dry goods, pro, this is a mail-free Oh! Download Address
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
