进度条

思路：

进度是已上传除以总大小的百分比；通过动态改变元素的宽度来显示百分比，数字的变化标明大小。

编程重要的是思想，逻辑清楚了，再来码代码会清晰许多。

前端代码：

<input type='file' name='pic' onchange='selfile();' />
<div id='progress'>
    <div id='bar'></div>
</div>

默认样式：

<style type="text/css">	
#progress{
	width: 500px;height: 30px;border: 1px solid green;
}
#bar{
	width: 0%;height: 100%;background: green;
}
</style>

利用上传过程中,xhr.upload.onprogress状态的变化，函数运行过程中自带的事件参数来计算上传百分比

xhr.upload.onprogress = function(ev){
	// console.log(ev);    //查看ev事件参数的属性和方法
	if(ev.lengthComputable){
		var percent = 100 * ev.loaded/ev.total;
		// console.log(percent);
		document.getElementById('bar').style.width = percent + '%';
		document.getElementById('bar').innerHTML = parseInt(percent) + '%';
	}
}

后记：

很久之前我就想用这种简单的进度条给自己做一个读书管理软件，但由于自己的惰性，一直没有成型。

好的软件产品，常常源于开发者自身的需求。
如果有什么工作能让你坚持长久的热情，那一定是做自己需要的产品。

池建强MacTalK

脑子里有了个12345，然后可以打个草稿，列列提纲，就算现在不做，也要加入到备忘录里吧。
当然一个阶段有一个阶段该干的事，也许过了这个时间段，再来做可能没有当时的动力，也可能回过头来当时的问题现在都成了小菜。

但行好事，莫问前程？！
做人还是纯粹一点，专注一点好。

• 本文作者： Linking
• 本文链接： https://linking.fun/2016/03/02/进度条/
• 版权声明： 版权所有，转载请注明出处！