zoukankan      html  css  js  c++  java
  • DHTMLX-Vault

    DHTMLX-Vault

    Vault是DHTMLX中带有进度条效果的文件上传组件。该控件基于ajax文件上传功能,加入进度条图形显示每个文件的传输进程,并且可以显示预估上传时间。

    基于HTML5标准,dhtmlxVault支持拖拽功能使它很容易上传一个或多个文件到web浏览器。不同的文件类型和相应的图标显示。可以定义多个文件类型和添加自定义图标。

    dhtmlxVault允许定义自定义上传根据文件扩展名和文件大小的限制。还可以控制数量和上传的文件的总大小。

    例子:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Unload</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
        <link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlxvault.css"/>
        <script src="../../../codebase/dhtmlxvault.js"></script>
        <script src="../../../codebase/swfobject.js"></script>
        <style>
            div.sample_title {
                font-size: 14px;
                font-family: Roboto, Arial, Helvetica;
                color: #404040;
                font-weight: 500;
                margin: 15px 1px;
            }
            div#maxsize_info {
                font-size: 14px;
                font-family: Roboto, Arial, Helvetica;
                color: #404040;
                margin: 16px 1px 20px 1px;
            }
            div#vaultObj {
                position: relative;
                width: 400px;
                height: 250px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.09);
            }
        </style>
        <script>
            var myVault;
            function doOnLoad() {
                if (myVault != null) return;
                window.dhx4.ajax.get("../server/upload_conf.php", function(r){
                    var t = window.dhx4.s2j(r.xmlDoc.responseText);
                    if (t != null) {
                        myVault = new dhtmlXVaultObject(t);
                        // update max file size notice
                        document.getElementById("maxsize_info").innerHTML = "Upload max filesize:"+myVault.readableSize(t.maxFileSize);
                    }
                });
            }
            function doUnload() {
                if (myVault != null) {
                    myVault.unload();
                    myVault = null;
                }
            }
        </script>
    
    </head>
    <body onload="doOnLoad();">
        <div class="sample_title">Unloading vault</div>
        <div id="maxsize_info">&nbsp;</div>
        <div id="vaultObj"></div>
        <br>
        <input type="button" value="init" onclick="doOnLoad();">
        <input type="button" value="unload" onclick="doUnload();">
    </body>
    </html>

    效果:

    这里写图片描述

    未完待续!!!。。。。。。。

  • 相关阅读:
    稳定性「三十六计」- 无状态化
    设置默认的超时和重试是一个基础设施的基本素养
    「前任的50种死法」开发踩坑案例--慢就是错
    稳定性「三十六计」- 配额管控
    编写代码的「八荣八耻」- 以开关上线为荣,以自信编码为耻
    Kubernetes的DaemonSet(下篇)
    使用Elasticsearch的动态索引和索引优化
    Kubernetes的DaemonSet(上篇)
    程序媛的人生观
    Kubernetes的污点和容忍(下篇)
  • 原文地址:https://www.cnblogs.com/hedianwei/p/6139622.html
Copyright © 2011-2022 走看看