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"> </div>
<div id="vaultObj"></div>
<br>
<input type="button" value="init" onclick="doOnLoad();">
<input type="button" value="unload" onclick="doUnload();">
</body>
</html>效果：
未完待续！！！。。。。。。。
