收集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()實現數據整合