一、简介:
1.下载地址:http://ajaxuploader.com/download/Ajax-Uploader.zip
2.官方网站:http://ajaxuploader.com/
3.费用列表:http://ajaxuploader.com/Order.aspx
二、初步使用:
1.将CuteWebUI.AjaxUploader.dll和AjaxUploader.lic添加到Bin文件夹中。
2.在Web.config的httpModules列表中添加AjaxUploader httpModule。
<httpModules>
<add name="CuteWebUI.UploadModule"type="CuteWebUI.UploadModule,CuteWebUI.AjaxUploader"/>
</httpModules>
3.设置文件临时文件
<CuteWebUI:Uploader id="uploaderFile" TempDirectory="~/UploaderTemp" runat="server"></CuteWebUI:Uploader>
或<add key="CuteWebUI.AjaxUploader.TempDirectory" value="~/UploaderTemp"/>
4.设置上传文件大小
<CuteWebUI:Uploader runat="server" ID="uploaderFile">
<Validateoption MaxSizeKB="1000"/>
</CuteWebUI:Uploader>
或<add key="CuteWebUI.AjaxUploader.GlobalMaxSizeKB" values="1000"/>
5.限制上传速度
<add key="CuteWebUI.AjaxUploader.UploadSpeedKB" values="20"/>
Please note that this setting will not work for small files orsilverlight upload mode.
三、自定义UI
1.自定义上传按钮
<CuteWebUI:Uploader ID="uploaderImg" ruant="server" InsertButtonID="btnUpload"></CuteWebUI:Uploader>
<asp:Button ID="btnUpload" runat="server" Text="上传图片"/>
2.自定义取消按钮
<CuteWebUI:Uploader ID="uploaderImg" runat="server" CancelButtonID="btnCancel"></CuteWebUI:Uploader>
<asp:Button ID="btnCancel"runat="server" Text="取消上传"/>
3.自定义进度栏面板
<CuteWebUI:Uploader ID="uploaderImg" runat="server" ProgressCtrlID="panel" ProgressTextID="label"></CueWebUI:Uploader>
<asp:Panel ID="panel" runat="server">
<asp:Label ID="label" runat="server"></asp:Label>
</asp:Panel>
4.自定义进度模板
在上面基础上添加ProgressTextTemplate属性 示例:ProgressTextTemplate="正在上传%F%,进度%SEND%/%SIZE%,速度%KBPS%,剩余%T%秒"
%P%:进度百分比
%T%:估计剩余时间(秒)
%F%:当前文件名
%SEND%:已经上传文件大小
%SIZE%:文件大小
%KBPS%:当前上传速度(KB/sec)
%BPS%:当前上传速度(B/sec)
:换行
5.创建自定义队列的表
方法1:
<CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1"></CuteWebUI:UploadAttachments>
<div id="queuediv" style="display:none">
<div id="queuedivtablecontainer"></div>
<div style="font-size:larger;padding-let:100px;margin:4px;">
<a href="#" οnclick="cancelalltasks();returnfalse;">Cancel All Tasks.</a>
</div>
</div>
<script>
Var uploader = document.getElementById("<%=UploaderAttachments1.ClientID %>");
uploader.handlequeueui = myqueueuihandler;
function myqueueuihandler(list)
{
if(list.length < 2)
document.getElementById("queuediv").style.display="none";
else{
document.getElementById("queuediv").style.display="";
var container =document.getElementById("queuedivtablecontainer");
var table = document.createElement("table");
table.style.borderCollapse="collapse";
table.cellSpacing=0;
table.cellPadding= 4;
table.border=1;
table.borderColor = "darkgreen";
for(var i =0;i<list.length;i++){
var name = list[i].FileName;
var size = list[i].FileSize;
var stat = list[i].Status;
var func = list[i].Cancel;
var row = table.insertRow(-1);
if(stat=="Queue"){
var btn = document.createElement(" A");
btn.href="javascript:void(0)";
btn.οnclick=func;
btn.innerHTML ="Cancel";
last.appendChild(btn);
}else{
Last.innertHTML = stat;
}
}
Container.appendChild(table);
}
Return false;
}
function cancelalltasks(){
Uploader.cancelall();
}
</script>
方法二:
Protected void Attachments1_PreRender()
{
Attachments1.GetItemsTable().Visible = false;
DataList1.DataSource = Attachments1.Items;
DataList1.DataBind();
}
<CuteWebUI:UploadAttachments ID="Attachments1" runat="server" OnPreRender="Attachments1_PreRender"></CuteWebUI:UploaderAttachments>
<asp:DataList ID="datalist" runat="server">
<ItemTemplate>
<table border="1">
<tr>
<td><%# Eval("FileName")%></td><td><%# Eval("FileSize")%></td><td><%# Eval("FileGuid") %></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
最后献上破解版 下载地址