Rimifon 发表于 2015-10-19 20:21:14

好久没来发贴了,来一个简单的上传进度条代码,无需服务器支持的。

使用了H5技术,IE慎行<!doctype html><html><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>带宽检测</title>
<style type="text/css">
body{ margin: 0mm; background-color: #eee; font-family: 微软雅黑; line-height: 1.5em }
h1{ font: bold 7mm/12mm 微软雅黑; color: #fff; background-color: #555; margin: 0mm; padding-left: 1cm }
blockquote{ border: 4mm ridge #fff; margin: 5mm 1cm; background-color: #fff; padding: 0mm 4mm }
h2{ color: #c00; margin: 1mm 0mm; font-size: 5mm }
</style><script type="text/javascript">
onload = function() {
        var tmp = new Array;        // [开始时间,上次时间,已加载, 测试中]
        var xhr = new XMLHttpRequest;
        var data = new Array(10 * 1024 * 1024 + 1).join("\x00");
        var ipt = document.querySelector("input");
        var prg = document.querySelector("progress");
        var cnt = document.querySelectorAll("h3 b");

        ipt.onclick = function() {
                if(tmp) return endTest(tmp);
                tmp = true;
                ipt.value = "结束测试";
                xhr.open("POST", ".", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.upload.onprogress = testSpeed;
                tmp = tmp = new Date;
                tmp = 0;
                xhr.send(data);
        };

        function testSpeed(evt) {
                prg.max = evt.total;
                prg.value = evt.loaded;
                var time = new Date - tmp;
                if(evt.loaded == evt.total) return endTest(evt.loaded);
                if(time < 1000) return;
                var speed = (evt.loaded - tmp) * 1000 / time;
                cnt.innerHTML = toSize(speed);
                cnt.innerHTML = toSize(speed* 8);
                tmp = new Date;
                tmp = evt.loaded;
        }

        function endTest(nmb) {
                xhr.abort();
                tmp = false;
                ipt.value = "开始测试";
                var speed = nmb * 1000 / (new Date - tmp);
                cnt.innerHTML = toSize(speed);
                cnt.innerHTML = toSize(speed* 8);
                prg.value = prg.max;
        }
};
function toSize(nmb, idx) {
        idx = ~~idx;
        var arr = ["", "K", "M", "G", "T"];
        if(nmb < 1024 || idx >= arr.length) return nmb.toFixed(2) + " " + arr;
        return toSize(nmb / 1024, ++idx);
}
</script></head><body>
<h1>测试带宽</h1>
<blockquote>
        <h2>上行速率测试</h2>
        <p><progress></progress></p>
        <p><input type="button" value="开始测试" /></p>
        <h3>上传速度:<b>0 K</b>B/s<br />上行带宽:<b>0 M</b>bps</h3>
</blockquote>
</body></html>

页: [1]
查看完整版本: 好久没来发贴了,来一个简单的上传进度条代码,无需服务器支持的。