最近一直在查找上传大文件的方法,有关该方面的介绍网上也是数不胜数。意外中发现了SlickUpload,按照它提供的示例代码学习了下,感觉相当好用。大家可以到网上下载安装程序。
首先需要先把Krystalware.SlickUpload.dll添加到工具箱中。具体步骤如下:
1)在工具箱中点右键添加选项卡。如:SlickUpload
2)选中SlickUpload,右键选择 “选择项”
3)点击 “浏览”按钮,选择要添加的.dll文件,最后点“确定”。
4)简单看下工具箱中的SlickUpload选项卡,添加后的结果如下所示:
现在就可以开始使用这些控件了,首先新建一个Web程序,修改web.config,由于web.config中的内容比较多,一定要谨慎修改,我现在把要修改的几点陈列出来。
(1)配置configSections节点,在<configSections>添加
<sectionGroup name="slickUpload">
<section name="uploadParser" type="Krystalware.SlickUpload.Configuration.NameValueConfigurationSectionHandler, Krystalware.SlickUpload"/>
<section name="uploadStreamProvider" type="Krystalware.SlickUpload.Configuration.NameValueConfigurationSectionHandler, Krystalware.SlickUpload"/>
<section name="statusManager" type="Krystalware.SlickUpload.Configuration.StatusManagerConfigurationSectionHandler, Krystalware.SlickUpload"/>
</sectionGroup>
(2)在<configuration>节点下添加<slickUpload>节点
<slickUpload>
<uploadStreamProvider type="File" location="~/Files"/>
</slickUpload>
(3)在<system.web>/<httpHandlers>节点下配置
<add path="SlickUpload.axd" verb="GET,POST" type="Krystalware.SlickUpload.SlickUploadHandler, Krystalware.SlickUpload"/>
(4)在<system.web>/<httpModules>节点下配置
<add name="HttpUploadModule" type="Krystalware.SlickUpload.HttpUploadModule, Krystalware.SlickUpload"/>
(5)在<system.web>下添加
修改完毕后,再来看下页面方面的处理,首先拖一个SlickUpload,具体的页面内容如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<% @ Register Assembly = " Krystalware.SlickUpload " Namespace = " Krystalware.SlickUpload.Controls "
TagPrefix = " kw " %>
<! 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 > SlickUpload </ title >
< script language = " javascript " type = " text/javascript " >
function cancelUpload() {
kw. get ( " <%=SlickUpload1.ClientID %> " ).cancel();
}
</ script >
</ head >
< body >
< form id = " form1 " runat = " server " >
< div >
< kw:SlickUpload ID = " SlickUpload1 " runat = " server "
ShowDuringUploadElements = " cancelButton " Width = " 480px "
onuploadcomplete = " SlickUpload1_UploadComplete " >
< DownlevelSelectorTemplate >
< input type = " file " />
</ DownlevelSelectorTemplate >
< UplevelSelectorTemplate >
< input type = " button " value = " 选择文件 " />
</ UplevelSelectorTemplate >
< FileTemplate >
< kw:FileListRemoveLink ID = " FileListRemoveLink1 " runat = " server " >
[x] 删除 </ kw:FileListRemoveLink >
< kw:FileListFileName ID = " FileListFileName1 " runat = " server " />
< kw:FileListValidationMessage ID = " FileListValidationMessage1 " runat = " server " ForeColor = " Red " />
</ FileTemplate >
< ProgressTemplate >
< table width = " 100% " >
< tr >
< td >
文件上传中
< kw:UploadProgressElement ID = " UploadProgressElement1 " runat = " server " Element = " FileCountText " >
</ kw:UploadProgressElement >
,
< kw:UploadProgressElement ID = " UploadProgressElement2 " runat = " server " Element = " ContentLengthText " >
(calculating) </ kw:UploadProgressElement >
.
</ td >
</ tr >
< tr >
< td >
当前正在上传:
< kw:UploadProgressElement ID = " UploadProgressElement3 " runat = " server " Element = " CurrentFileName " >
</ kw:UploadProgressElement >
, 进度
< kw:UploadProgressElement ID = " UploadProgressElement4 " runat = " server " Element = " CurrentFileIndex " >
& nbsp; </ kw:UploadProgressElement >
of
< kw:UploadProgressElement ID = " UploadProgressElement5 " runat = " server " Element = " FileCount " >
</ kw:UploadProgressElement >
.
</ td >
</ tr >
< tr >
< td >
上传速度:
< kw:UploadProgressElement ID = " UploadProgressElement6 " runat = " server " Element = " SpeedText " >
(calculating) </ kw:UploadProgressElement >
.
</ td >
</ tr >
< tr >
< td >
估计剩余时间:
< kw:UploadProgressElement ID = " UploadProgressElement7 " runat = " server " Element = " TimeRemainingText " >
(calculating) </ kw:UploadProgressElement >
</ td >
</ tr >
< tr >
< td >
< div style = " border: 1px solid #008800; height: 1.5em; position: relative " >
< kw:UploadProgressBarElement ID = " UploadProgressBarElement1 " runat = " server " Style = " background-color: #00ee00;
width: 0 ; height: 1 .5em " >
</ kw:UploadProgressBarElement >
< div style = " text-align: center; position: absolute; top: .15em; width: 100% " >
< kw:UploadProgressElement ID = " UploadProgressElement8 " runat = " server " Element = " PercentCompleteText " >
(calculating) </ kw:UploadProgressElement >
</ div >
</ div >
</ td >
</ tr >
</ table >
</ ProgressTemplate >
</ kw:SlickUpload >
< hr />
< asp:Button ID = " UploadButton " runat = " server " Text = " 上传 " />
< asp:Button ID = " CancelButton " runat = " server " Text = " 取消 " style = " display:none " OnClientClick = " cancelUpload();return false; " />
< br />< br />
< asp:Label ID = " uploadResult " runat = " server " ></ asp:Label >
< asp:Repeater ID = " UploadFileList " runat = " server " EnableViewState = " false " >
< HeaderTemplate >< ul ></ HeaderTemplate >
< ItemTemplate >< li ><% # DataBinder.Eval(Container.DataItem, " ClientName " ) %></ li ></ ItemTemplate >
< FooterTemplate ></ ul ></ FooterTemplate >
</ asp:Repeater >
</ div >
</ form >
</ body >
</ html >
后台处理只需要出来下UploadComplete事件,代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{
uploadResult.Text = " 上传结果: " + args.Status.State;
if (args.Status.State == UploadState.Terminated)
{
uploadResult.Text = " .原因: " + args.Status.Reason;
}
if (args.Status.State != UploadState.Terminated)
{
UploadFileList.DataSource = args.UploadedFiles;
UploadFileList.DataBind();
}
}
完成这一步后,基本上可以实现大文件的上传啦!其实呢?我们做的事情并不多,对SlickUpload底层也并不了解,然而却实现了一个比较难的功能。最后呈上效果图:
顺便提一下,如果上传同样的文件会提示Error。