<style type="text/css">

			.progress{

				height: 10px;

				width: 600px;

				border: 1px solid red;

			}

			.in{

				height: 10px;

				width: 5%;

				background-color: green;

			}

		</style>

		

		<form>

			<input type="text" name="user" id="" value="" /><br />

			<input type="password" name="pass" id="" value="" /><br />

			<input type="file" name="files" id="" value="" />

			<!--不用submit 和button  按钮，因为，这两种按钮会刷新页面-->

			<!--<input type="submit" value=""/>-->

			<input type="button" id="btn" value="请求数据" />

		</form>

		<div class="progress">

			<div class="in"></div>

		</div>

		<script type="text/javascript">

			var btn = document.getElementById('btn');

			btn.onclick = function(){

				var xhr = new XMLHttpRequest();

				var f = document.querySelector('form');

				//原生js表单序列化

				var formdata = new FormData(f);            //利用 FormData   注意事项 表单控件必须有name属性

				xhr.open('post','03.php');

				//绑定进度条事件

				xhr.upload.onprogress = function(e){         //xlm2.0 新增的属性

					var value = e.loaded/e.total;

					console.log(value);

					document.querySelector('.in').style.width = value*100+'%';

				}

				xhr.send(formdata);

				xhr.onreadystatechange = function () {

					if(xhr.readyState == 4 && xhr.status==200){

						document.body.innerHTML += 	"<img src="+ xhr.responseText +" />"

					}

				}

			}