AjaxUploader使用

转自： http://www.cnblogs.com/AngelLee2009/category/325803.html

简介：

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 or silverlight 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属性

   %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();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>