一般10M以下的文件上傳通過設(shè)置Web.Config,再用VS自帶的FileUpload控件就可以了,但是如果要上傳100M甚至1G的文件就不能這樣上傳了。NeatUpload是一款為數(shù)不多的開源、免費(fèi)的文件上傳控件,不僅支持大文件上傳,而且還顯示上傳進(jìn)度。下面我們來介紹一下NeatUpload控件的使用方法。
一、下載NeatUpload并解壓在任意位置
http://neatupload.codeplex.com/releases/view/59339,可以下載到最新的NeatUpload,目前最新版本應(yīng)該是NeatUploadBinaries-1-3-26,解壓后可以得到如下文件:
二、安裝配置NeatUpload控件(.Net Framework2.0環(huán)境及以上版本)
1. 將bin/中Brettle.Web.NeatUpload.dll添加到項(xiàng)目或網(wǎng)站的引用中:
-
在工具箱上添加項(xiàng),可以得到7個(gè)工具:
我們主要使用我們主要使用InputFile和ProgressBar這兩個(gè)控件。
至此,NeatUpload的安裝和配置工作完成。
三、使用NeatUpload控件
1. 前臺代碼
-
后臺代碼:
if (AttachFile.HasFile)
{
string FileName = this.AttachFile.FileName;//獲取上傳文件的文件名,包括后綴
string ExtenName = System.IO.Path.GetExtension(FileName);//獲取擴(kuò)展名
string _datePath = DateTime.Now.ToString("yyyyMMdd") + "/";
string toFileFullPath = HttpContext.Current.Server.MapPath("~/File_Upload/" + _datePath);
//檢查是否有該路徑?jīng)]有就創(chuàng)建
if (!Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
string SaveFileName = System.IO.Path.Combine(
System.Web.HttpContext.Current.Request.MapPath("~/File_Upload/"),
_datePath + DateTime.Now.ToString("yyyyMMddhhmm") + ExtenName);//合并兩個(gè)路徑為上傳到服務(wù)器上的全路徑
if (this.AttachFile.ContentLength > 0)
{
try
{
AttachFile.MoveTo(SaveFileName, Brettle.Web.NeatUpload.MoveToOptions.Overwrite);
result = "/File_Upload/" + _datePath + DateTime.Now.ToString("yyyyMMddhhmmss") + ExtenName;
}
catch (Exception ex)
{
throw ex;
}
string url = "/File_Upload/" + _datePath + DateTime.Now.ToString("yyyyMMddhhmmss") + ExtenName; //文件保存的路徑
float FileSize = (float)System.Math.Round((float)AttachFile.ContentLength / 1024000, 1); //獲取文件大小并保留小數(shù)點(diǎn)后一位,單位是M
}
else
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "警告", "alert('選擇要上傳的文件為空!');", true);
}
}
else
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "警告", "alert('請選擇要上傳的文件!');", true);
}
-
最終效果:
四、實(shí)例使用環(huán)境
1. 使用環(huán)境VS2012+.Net Framework2.0,如果是在.Net Framework 3.5及其以上版本使用安裝和配置會更簡單。
五、 常見問題
1.
解決方法是在system.webServer節(jié)中加入以下內(nèi)容,讓服務(wù)器允許的最大請求量增加,如下設(shè)置的是1G:
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<modules runAllManagedModulesForAllRequests="true" />
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security>
</system.webServer>
另外,不行的話還得修改IIS配置
選中自己的站點(diǎn),并雙擊“請求篩選”,選擇右側(cè)的”編輯功能限制”,在彈出的頁面中,我們看到默認(rèn)請求限制正是30M,修改請求大小限制為合適的值即可,保存后重啟站點(diǎn)即可。
2.
最可能的原因:
此應(yīng)用程序在system.web/httpModules節(jié)中定義配置;
解決方法是將system.web節(jié)的“UploadHttpModules"配置調(diào)整到system.webServer節(jié)中,以適應(yīng)在托管管道模式下運(yùn)行應(yīng)用程序:
<httpModules>
<add type="URLRewriter.ModuleRewriter, URLRewriter" name="ModuleRewriter" />
<add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule,Brettle.Web.NeatUpload"/>
</httpModules>
三:關(guān)于進(jìn)度條的設(shè)置及使用
1. 單文件上傳,將InputFile和ProgressBar控件加進(jìn)頁面中,再添加一個(gè)服務(wù)器端按鈕,添加鼠標(biāo)點(diǎn)擊事件,如下:
<script type="text/javascript">
function ToggleVisibility(id, type) //進(jìn)度條的隱藏和顯示
{
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>
控件生成
<div class="col-sm-5">
<Upload:InputFile ID="AttachFile" runat="server" />
<Upload:ProgressBar ID="ProgressBar1" runat='server' >
</Upload:ProgressBar> </div>
點(diǎn)擊事件
<asp:Button ID="btnSave" runat="server" Text="保存" CssClass="btn btn-primary" OnClick="btnSave_Click" OnClientClick="ToggleVisibility('progressbar', 'on')"/>
4、 修改進(jìn)度條樣式,主要修改default.css、Progress.aspx及ProgressBar控件的屬性
將壓縮包解壓后的NeatUpload文件復(fù)制粘貼到自己的項(xiàng)目中
修改這兩個(gè)文件:
default.css部分,修改進(jìn)度條的顏色,背景圖片,顯示文字的顏色等
-
.ProgressDisplay .ProgressBar
-
{
-
background-color:#6CAF00; /*修改背景顏色*/
-
background-image:url('progressbar.gif') /*修改背景圖片*/
-
}
-
#normalInProgress{
-
color: Red; /*正在上傳時(shí)進(jìn)度條的字體顏色*/
-
}
-
#completed{
-
color:Blue; /*上傳完成的字體顏色*/
-
}
Progress.aspx部分,修改在整個(gè)上傳過程中進(jìn)度條顯示的狀態(tài)和信息
-
<Upload:DetailsSpan id="normalInProgress" runat="server" WhenStatus="NormalInProgress" >
-
<%-- 文件正在上傳時(shí)顯示的 --%>
-
<%-- <%# FormatCount(BytesRead) %>/<%# FormatCount(BytesTotal) %> <%# CountUnits %> --%>
-
<%# FormatRate(BytesPerSec) %> <%# String.Format("{0:0%}", FractionComplete) %>
-
<%-- - 剩余時(shí)間<%# FormatTimeSpan(TimeRemaining) %> s --%>
-
</Upload:DetailsSpan>
-
<Upload:DetailsSpan id="chunkedInProgress" runat="server" WhenStatus="ChunkedInProgress" >
-
<%# FormatCount(BytesRead) %> <%# CountUnits %>
-
at <%# FormatRate(BytesPerSec) %>
-
- <%# FormatTimeSpan(TimeElapsed) %> elapsed
-
</Upload:DetailsSpan>
-
<Upload:DetailsSpan id="processing" runat="server" WhenStatus="ProcessingInProgress ProcessingCompleted" >
-
<%# ProcessingHtml %>
-
</Upload:DetailsSpan>
-
<Upload:DetailsSpan id="completed" runat="server" WhenStatus="Completed">
-
<%-- 文件上傳完成時(shí)顯示的 --%>
-
文件大小: <%# FormatCount(BytesRead) %> <%# CountUnits %>
-
<%-- at <%# FormatRate(BytesPerSec) %>
-
took <%# FormatTimeSpan(TimeElapsed) %> --%>
-
</Upload:DetailsSpan>
-
<Upload:DetailsSpan id="cancelled" runat="server" WhenStatus="Cancelled">
-
上傳已被取消
-
</Upload:DetailsSpan>
-
<Upload:DetailsSpan id="rejected" runat="server" WhenStatus="Rejected">
-
禁止: <%# Rejection != null ? Rejection.Message : "" %>
-
</Upload:DetailsSpan>
-
<Upload:DetailsSpan id="error" runat="server" WhenStatus="Failed">
-
錯(cuò)誤: <%# Failure != null ? Failure.Message : "" %>
-
</Upload:DetailsSpan>
進(jìn)度條修改后還得繼續(xù)完善