进度条

在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过 HT for Web 矢量来实现HTML5文件上传进度条，矢量在《 矢量Chart图表嵌入HTML5网络拓扑图的应用 》一文中已经讲述了关于setCompType()方法的应用，今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条，我们先来看下效果图： 从效果图可以看到，向服务器上传了一个mp4文件，并在最下方显示当前上传进度。 那么接下来我们就来探讨下具体实现： 首先，我们来分析下进度条的结构： 1. 需要一个背景，background 2. 需要一个当前进度值，value 3. 需要一个前景，foreground，根据当前进度值，绘制前景，盖过背景 结构就这么简单，那么接下来就是具体的实现了，看码： ht.Default.setImage('progress', { width : 150, height : 12, comps : [ // 绘制背景 { type : 'rect', rect : {x : 0, y : 0, width : 115, height : 12}, background : {func : function(data) {return data.a(