zoukankan      html  css  js  c++  java
  • 原生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 +" />"
    					}
    				}
    			}
    			
    	
    
    
    欢迎各位大虾指正
  • 相关阅读:
    左眼右眼
    Mac 的“任务管理器” —— 活动监视器
    [分享] VIM 常用命令及游戏练级
    iOS 7 如何关闭已打开的应用(App)
    iPhone 如何设置彩信 ?
    JavaScript —— attachEvent 方法的使用
    习惯&感恩
    MySQL 基础 备份和恢复
    Python 数据结构 树
    Python 正在表达式
  • 原文地址:https://www.cnblogs.com/he-zhi/p/6959598.html
Copyright © 2011-2022 走看看