DHTMLX-Vault

最新推荐文章于 2020-12-23 19:58:16 发布

weixin_30568591

最新推荐文章于 2020-12-23 19:58:16 发布

阅读量143

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/hedianwei/p/6139622.html

版权

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>