AjaxUploader使用

  1. 简介:
    1. 下载地址:http://ajaxuploader.com/download/Ajax-Uploader.zip
    2. 官方网站:http://ajaxuploader.com/
    3. 费用列表:http://ajaxuploader.com/Order.aspx
  2. 初步使用:
    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.
  3. 自定义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>

(未完、待续)

原文地址:https://www.cnblogs.com/AngelLee2009/p/2194996.html