收集form数据+附件上传+上传图片立即显示+上传大附件，进度条显示

2019独角兽企业重金招聘Python工程师标准>>>

ajax收集表单数据

    分为两种情况：

            一 有form表单情况

  <script type="text/javascript">
                var logFormObject=document.getElementById('logon');

                function acceppt3(){
                        var xhr = creatXMLHttpRequest();
                    
                        var fd = new FormData(logFormObject);
                        xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status==200){
                                var arr=xhr.responseText;
                        
                                console.log(arr);
                            }
                        }
                xhr.open('post','json2.php');
                xhr.send(fd);
            }
          </script>

表单部分：

<form action="form1"  method="post"  id="logon">
  <input name="usr"  type="text"/>
  <input name="pass">
  </form>

json2.php部分：

<?php
    echo $_POST['usr'],"|",$_POST['pass'];

在send方法中发送的应该是整个FormData对象 而不是getElementById获得元素节点对象。

    在url地址页面。中我们使用POST数组，数组下表就是表单中的name属性值.

    创建FormData对象， 如果有表单对象元素结点 通过dom操作获得的

    如  

var xhr = creatXMLHttpRequest();
var fd = new FormData(logFormObject);

那 如果没有form元素的html页面 我们是否发送form数据呢？

            第二 没有form元素

//获得元素结点对象
var xhr = document.getElementById("idname");
var fd = new FormData(logFormObject);
fd.append('usrname','zhengdia');
fd.append('pass',1546875);
这就相当于在我们的fd表单对象中放入了两个name 属性分别等于usrname和pass.

总结：

1.       通过FormData给服务器传递数据

a)         通过form元素节点对象实现

b)        通过formData的方法append()实现数据整合

转载于:https://my.oschina.net/osmyblog/blog/283114