- 简介:
- 初步使用:
- 将CuteWebUI.AjaxUploader.dll和AjaxUploader.lic添加到Bin文件夹中。
- 在Web.config的httpModules列表中添加AjaxUploader httpModule。
<httpModules>
<add name="CuteWebUI.UploadModule" type="CuteWebUI.UploadModule,CuteWebUI.AjaxUploader"/>
</httpModules>
- 设置文件临时文件
<CuteWebUI:Uploader id="uploaderFile" TempDirectory="~/UploaderTemp" runat="server"></CuteWebUI:Uploader>
或<add key="CuteWebUI.AjaxUploader.TempDirectory" value="~/UploaderTemp"/>
- 设置上传文件大小
<CuteWebUI:Uploader runat="server" ID="uploaderFile">
<Validateoption MaxSizeKB="1000"/>
</CuteWebUI:Uploader>
或<add key="CuteWebUI.AjaxUploader.GlobalMaxSizeKB" values="1000"/>
- 限制上传速度
Please note that this setting will not work for small files or silverlight upload mode. - 自定义UI
- 自定义上传按钮
<CuteWebUI:Uploader ID="uploaderImg" ruant="server" InsertButtonID="btnUpload"></CuteWebUI:Uploader>
<asp:Button ID="btnUpload" runat="server" Text="上传图片"/>
- 自定义取消按钮
<CuteWebUI:Uploader ID="uploaderImg" runat="server" CancelButtonID="btnCancel"></CuteWebUI:Uploader>
<asp:Button ID="btnCancel" runat="server" Text="取消上传"/>
- 自定义进度栏面板
<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>
- 自定义进度模板
在上面基础上添加ProgressTextTemplate属性
%P%:进度百分比
%T%:估计剩余时间(秒)
%F%:当前文件名
%SEND%:已经上传文件大小
%SIZE%:文件大小
%KBPS%:当前上传速度(KB/sec)
%BPS%:当前上传速度(B/sec)
:换行
- 创建自定义队列的表
方法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="#" onclick="cancelalltasks();return false;">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.onclick=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=""></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>
(未完、待续)