File Upload with progress bar (multiple styles)

File Upload has a variety of beautiful styles with progress bars!

 

 

 

Friendly prompts and upload verification!

 

 

 

 

PartCode:

 

 <  Form  ID  = "Form1"  Runat  = "Server"> <  ASP  : Scriptmanager  ID  = "Scriptmanager"  Runat  = "Server"  Enablepagemethods  = "True"/> <  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' );} // Registry ticket  Function Register (Form, fileupload ){ This . Form = form; This . Fileupload = fileupload ;} // Upload Verification  Function Onuploadclick (){VaR Vaild = fileupload. value. length> 0; If (Vaild) {$ get ( 'Upload' ). Disabled = 'Disabled' ; Updatemessage ( 'Info' , 'Initialize upload ...' ); // Submit the upload Form. Submit (); // Hide the frame SYS. UI. domelement. addcssclass ($ get ( 'Uploadframework' ), 'Ddden' ); // The progress bar is displayed at the beginning of 0. Progressbar. set_percentage (0); progressbar. Show (); // Upload Process Intervalid = Window. setinterval ( Function () {Pagemethods. getuploadstatus ( Function (Result ){ If (Result ){ // Update the progress bar to a new value Progressbar. set_percentage (result. percentcomplete ); // Update information Updatemessage ( 'Info' , Result. Message ); If (Result = 100 ){ // Disappears automatically Window. clearinterval (intervalid) ;}}) ;}, 500 );} Else {Oncomplete ( 'Error' , 'You must select a file' );}} Function Oncomplete (type, MSG ){ // Disappears automatically Window. clearinterval (intervalid );// Display the message Updatemessage (type, MSG ); // Hide the progress bar Progressbar. Hide (); progressbar. set_percentage (0 ); // Re-enable button $ Get ( 'Upload' ). Disabled = '' ; // Display frame SYS. UI. domelement. removecssclass ($ get ( 'Uploadframework' ), 'Ddden' );} Function Updatemessage (type, value ){ VaR Status = $ get ( 'Status' ); Status. innerhtml = value; // Remove a style Status. classname = '' ; SYS. UI. domelement. addcssclass (status, type );} </  Script  > <  Div  > <  Div  Class  = "Upload"> <  H3  > File Upload</  H3  > <  Div  > <  IFRAME  ID  = "Uploadframe"  Frameborder  = "0"  Scrolling  = "No"  SRC  = "Upload. aspx"> </  IFRAME  > <  MB :  Progresscontrol  ID  = "Progress"  Runat  = "Server"  Cssclass  = "Lightblue"  Style  ="  Display : None"  Value  = "0"  Mode  = "Manual"  Speed  = ". 4" Width  = "100%"/> <  Div  > <  Div  ID  = "Status"  Class  = "Info"> Select the file to upload </  Div  > <  Div  Class  = "Commands"> <  Input ID  = "Upload"  Type  = "Button"  Value  = "Upload"/> </  Div  > </  Div  > </  Div  > </  Div  > </  Div  > </  Form > 

 

 

 

 

 

 

 

 

 

 

 

 

Upload. aspx:

 If ( This . Ispostback ){ Uploadinfo Uploadinfo = This . Session [ "Uploadinfo" ] As  Uploadinfo ;If (Uploadinfo = Null ){ // Let the parent page know that the upload cannot be processed  Const string JS = "Window. Parent. oncomplete ('error', 'file cannot be uploaded. Please refresh the page and try again );" ; Scriptmanager . Registerstartupscript ( This , Typeof ( Upload_aspx ), "Progress" , JS, True );} Else {// Let the server know that we are not ready yet .. Uploadinfo. isready = False ; // Upload Verification  If ( This . Fileupload. postedfile! = Null && This . Fileupload. postedfile. contentlength> 0 && This . Fileupload. postedfile. contentlength <1048576) // Limit 1 MB { // Set the 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 initialization... Uploadinfo. isready = True ; // Cache Int Buffersize = 1; Byte [] Buffer = New byte [Buffersize]; // Save the byte  Using ( Filestream FS = New  Filestream ( Path . Combine (path, filename ), Filemode . Create )){ While (Uploadinfo. uploadedlength <uploadinfo. contentlength ){// Put the input stream into the buffer zone  Int Bytes = This . Fileupload. postedfile. inputstream. Read (buffer, 0, buffersize ); // Write bytes to the file stream FS. Write (buffer, 0, bytes ); // Update the size Uploadinfo. uploadedlength + = bytes; // The thread sleep and the upload will be slower so that you can see the progress bar. System. threading. Thread . Sleep (100 );}} // Delete.  File . Delete (Path . Combine (path, filename )); // Let the parent page know that the upload process has been completed  Const string JS = "Window. Parent. oncomplete ('success', '{0} uploaded successfully ');" ; Scriptmanager . Registerstartupscript ( This , Typeof ( Upload_aspx ), "Progress" , String . Format (JS, filename ), True );}Else { If ( This . Fileupload. postedfile. contentlength> = 1048576) // 1 m { Const string JS = "Window. Parent. oncomplete ('error', 'exceeds the size limit of the uploaded file. Please reselect ');" ; Scriptmanager . Registerstartupscript ( This , Typeof ( Upload_aspx ), "Progress" , JS,True );} Else { Const string JS = "Window. Parent. oncomplete ('error', 'file upload error ');" ; Scriptmanager . Registerstartupscript ( This , Typeof ( Upload_aspx ), "Progress" , JS, True ) ;}} Uploadinfo. isready = False ;}}

The code will be packaged and downloaded without being pasted!

Uploading is categorized here: http://www.cnblogs.com/zengxiangzhan/category/269831.html