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

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()实现数据整合