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>

    效果:

    这里写图片描述

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

  • 相关阅读:
    LBS 经纬度定位
    LBS 经纬度定位
    GPS定位基本原理
    GPS定位基本原理
    Android Studio 之 启动和停止服务
    Android Studio 之 启动和停止服务
    【算法】最短路——两点最短总权和
    【算法】最短路——两点最短总权和
    【郑轻】[1743]解方程
    【郑轻】[1743]解方程
  • 原文地址:https://www.cnblogs.com/hedianwei/p/6139622.html
Copyright © 2011-2022 走看看