原生js表单序列化----- FormData

		<style type="text/css">
			.progress{
				height: 10px;
				 600px;
				border: 1px solid red;
			}
			.in{
				height: 10px;
				 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 +" />"
					}
				}
			}