zoukankan      html  css  js  c++  java
  • 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>

    (未完、待续)

  • 相关阅读:
    简单例子windows 共享内存 Demo -----(一)
    Qt qss浅析
    基于EntityFramework的权限的配置和验证
    快速获取Windows系统上的国家和地区信息
    Scorm 1.2 开发文档
    SQL Server 联表字段合并查询
    解决 ko mapping 数组无法添加新对象的问题
    SQL Server 数据库初始化准备脚本
    妾心如水,良人不来
    有趣的格子效果
  • 原文地址:https://www.cnblogs.com/AngelLee2009/p/2194996.html
Copyright © 2011-2022 走看看