Home > Developer > Web Develop
Version: NeatUpload-1.2.32, for file upload. Large files can be transmitted.
1. In the VS Toolbox, right-click on "Select Items" ... Add Brettle.Web.NeatUpload.dll to the toolbox.
You can see the appropriate controls in the Toolbox after you add them.
2. Create a new Web project. Copy the neatupload to the project root directory.
3. Modify the Web. config
<?xml version= "1.0" encoding= "Utf-8"?> <configuration> <configSections> <sectiongroup name= "System.Web" > < Section name="neatupload" type= "Brettle.Web.NeatUpload.ConfigSectionHandler, Brettle.Web.NeatUpload "allowlocation=" true "/> </sectionGroup> </configSections> <appSettings/> <connectionStrings/> <system.web> < Neatupload usehttpmodule="false" maxnormalrequestlength= "4096" maxrequestlength= "2097151" Defaultprovider= "Filesystemuploadstorageprovider" > < providers > < Add name="Filesystemuploadstorageprovider" type="Brettle.Web.NeatUpload.FilesystemUploadStorageProvider, BRETTLE.WEB.N Eatupload "/> </ providers > </ Neatupload > <compilation debug= "false" > </compilation> <authentication mode= "Windows"/> <!-- If you do not add this httpmodules, the progress bar does not show - < Add name="uploadhttpmodule" type= "Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload "/> </system.web> <location path= "default.aspx" > <system.web> < Neatupload usehttpmodule="true"/> </system.web> </location> </configuration> |
You can now drag and drop the control to start programming.
The 4.aspx page code is as follows:
<title> Neatupload </title> <script type= "Text/javascript" language= "JavaScript" > function togglevisibility (ID, type) { El = document.getElementById (ID); if (El.style) { if (type = = ' on ') { El.style.display = ' block '; } Else { El.style.display = ' None '; } } Else { if (type = = ' on ') { El.display = ' block '; } Else { El.display = ' None '; } } } </script> <body> <form id= "Form1" runat= "Server" > <div> <upload:inputfile id= "Attachfile" runat= "Server"/> <asp:button id= "Upload" runat= "Server" text= "Upload" onclientclick= "togglevisibility (' ProgressBar ', ' on ')" onclick= "Upload_click"/> <div id= "ProgressBar" > <upload:progressbar id= "Pbprogressbar" runat= ' server ' inline= "true" width= "280px" height= "50px" > </Upload:ProgressBar> </div> </div> </form> </body> |
The design page is as follows:
5. Button event handler function:
protected void Upload_click (object sender, EventArgs e) { String FileName = this. attachfile.filename;//get the full path of the uploaded file String extenname = System.IO.Path.GetExtension (FileName);//Get extension String savefilename = System.IO.Path.Combine (Request.physicalapplicationpath, DateTime.Now.ToString ("Yyyymmddhhmm" ) + extenname);//merge two paths to the full path uploaded to the server if (this. Attachfile.contentlength > 0) { Try { This. Attachfile.moveto (Savefilename, Brettle.Web.NeatUpload.MoveToOptions.Overwrite); } catch (Exception ex) { Throw ex; } } } |
So that the program can be run here.
The style of the default progress bar can be modified.
Mainly modifies the properties of the Default.css, progress.aspx, and ProgressBar controls.
Default.css Modification Section:
. Progressdisplay. ProgressBar { Background-color: #D7E5F7; Background-image:url ("/11.gif"); /* progress bar background picture */ height:20px; } #normalInProgress { color:red; /* progress bar Font Color */ } #completed { Color:blue; /* Upload the finished font color */ } |
Progress.aspx is the core file that displays the progress bar, and the relevant data is displayed inside.
<TD id= "BARTD" > <div id= "Statusdiv" runat= "Server" class= "StatusMessage" > <upload:detailsspan id= "normalinprogress" runat= "Server" whenstatus= "normalinprogress" style= "Font-weight: Normal White-space:nowrap; " > <%-- is displayed when uploading--%> <%--<%# FormatCount (bytesread)%>/<%# FormatCount (bytestotal)%> <%# CountUnits%>--%> (<%# String.Format ("{0:0%}", Fractioncomplete)%>) at <% #FormatRate (bytespersec)%> <%---<%# formattimespan (timeremaining)%> left--%> </Upload:DetailsSpan> <upload:detailsspan id= "chunkedinprogress" runat= "Server" whenstatus= "chunkedinprogress" style= "Font-weight: Normal White-space:nowrap; " > <%# FormatCount (bytesread)%> <%# countunits%> At <%# formatrate (bytespersec)%> -<%# Formattimespan (timeelapsed)%> elapsed </Upload:DetailsSpan> <upload:detailsspan id= "Completed" runat= "Server" whenstatus= "completed" > <%-- displayed when the upload is complete-- %> Completed: <%# formatcount (bytesread)%> <%# countunits%> At <%# formatrate (bytespersec)%> Took <%# Formattimespan (timeelapsed)%> </Upload:DetailsSpan> <upload:detailsspan id= "cancelled" runat= "server" whenstatus= "cancelled" > cancelled! </Upload:DetailsSpan> <upload:detailsspan id= "rejected" runat= "server" whenstatus= "rejected" > Rejected: <%# rejection! = null? Rejection.message: ""%> </Upload:DetailsSpan> <upload:detailsspan id= "Error" runat= "Server" whenstatus= "Failed" > Error: <%# Failure! = null? Failure.message: ""%> </Upload:DetailsSpan> <upload:detailsdiv id= "Bardetailsdiv" runat= "Server" usehtml4= "true" Width= ' <%# unit.percentage (Math.floor (100*fractioncomplete))%> ' class= "ProgressBar" ></upload:d Etailsdiv> </div> </td> |
The program is as follows:
Before uploading:
In the upload:
Upload end:
The installation of neatupload uses file upload. Large files can be transmitted.
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
