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

        <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 +" />"
                    }
                }
            }
            
    

转载于:https://www.cnblogs.com/he-zhi/p/6959598.html