AjaxUploader使用

一、简介：

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="#" onclick="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.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="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>

最后献上破解版 下载地址