1. 程式人生 > >var formData = new FormData($("#formUpload")[0]);新增資料,以及為什麼是新增[0]

var formData = new FormData($("#formUpload")[0]);新增資料,以及為什麼是新增[0]

因為new FormData需要的是一個HtmlElement型別的資料,而jquery拿到的是HtmlElement集合,所以哪怕只有一個元素,也要用[0]取其第一個元素。

 

jQuery是一個偽陣列物件,本身是物件,能表現出來陣列的特點: 有length屬性,能夠用下標取值;

$(".someClass") // 這個時候將所有匹配到DOM元素物件放在jQuery維護的陣列中;

$("#id") // 這個時候將所有匹配到DOM元素物件放在jQuery維護的陣列中;

 

 

用來新增資料,可以是字串、Blod檔案流、File檔案流

formData.append('a', 1)

意為新增一個鍵值對,重複新增的鍵不會被覆蓋

formData.set('a', 1)意為修改某個鍵的值,如果不存在則作用等同於append,但是重複新增的值會相互覆蓋

var formData = new FormData() ;

formData.append('a', 1);

formData.append('a', 2);

formData.set('b', 3) ;

formData.set('b', 4);

jQuery還可以呼叫next()last()等方法(返回結果也還是jQuery物件,jQuery鏈式功能);

 

舉例

   $(function(){
       
       $("#add_address_btn").on("click",function(){
           var address = document.getElementsByClassName("cndzk-entrance-division-header-click-input-name");
           var detail = document.getElementsByClassName("cndzk-entrance-associate-area-textarea").innerHTML;
           var addressLink = "";
           for(var i=0;i<address.length;i++){
               addressDetail+=address[i].innerHTML;
           }
           var formData = new FormData($("myForm")[0]);
           addressDetail+=detail;
           formData.append("addressDetail",addressLink);
           console.log(addressDetail);
           return false;
           $.ajax({
             url : "/cgi/home/UserHome?function=AddDeliveryAddress",
             type : "post",
             dataType : "json",
             data : formData,
             success:function(data){
                 
             },error:function(jqXHR, textStatus, errorThrown){
                    //jqXHR物件的資訊
                    console.log('jqXHR.responseText --> ',jqXHR.responseText);
                    console.log('jqXHR.status --> ',jqXHR.status);
                    console.log('jqXHR.readyState --> ',jqXHR.readyState);
                    console.log('jqXHR.statusText --> ',jqXHR.statusText);
                    //其他兩個引數的資訊
                    console.log('textStatus --> ',textStatus);
                    console.log('errorThrown --> ',errorThrown);
             }
           });
       });
   });