鍍金池/ 問答/HTML/ 關(guān)于一個循環(huán)

關(guān)于一個循環(huán)

login:function(data){

    let fd=new FormData()
    for(var key in data){
        fd.append(key,data[key])
    }
    console.log(fd)
 }

傳入data之后 一直輸出空的FormData對象

回答
編輯回答
別瞎鬧

FormData打印出來是一個空的Objet，但并不是說它的內(nèi)容是空的，只是它對前端開發(fā)人員是透明的，無法查看、修改、刪除里面的內(nèi)容，只能append添加字段。

FormData無法得到文件的內(nèi)容，而使用FileReader可以讀取整個文件的內(nèi)容。用戶選擇文件之后，input.files就可以得到用戶選中的文件，如下代碼：

$("#file-input").on("change", function() {
    let fileReader = new FileReader(),
        fileType = this.files[0].type;
    fileReader.onload = function() {
        if (/^image/.test(fileType)) {
            // 讀取結(jié)果在fileReader.result里面
            $(`<img src="${this.result}">`).appendTo("body");
        }
    }
    // 打印原始File對象
    console.log(this.files[0]);
    // base64方式讀取
    fileReader.readAsDataURL(this.files[0]);    
});

把原始的File對象打印出來是這樣的：

它是一個window.File的實例，包含了文件的修改時間、文件名、文件的大小、文件的mime類型等。如果需要限制上傳文件的大小就可以通過判斷size屬性有沒有超，單位是字節(jié)，而要判斷是否為圖片文件就可以通過type類型是否以image開頭。

參考這篇文章

前端本地文件操作與上傳

2017年5月11日 14:38
編輯回答
葬愛

其實對象里內(nèi)容是有的，只不過它不像json一樣可以直接在控制臺log出來而已。

var data = {
  text: '123',
  phone: 'asdasd'
};
let fd=new FormData();
for(var key in data){
  fd.append(key,data[key]);
}
console.log(fd.get('text'));

你用get方法試試FormData.get()

2017年3月15日 05:49
編輯回答
我以為

確實上面的回答也說明了. 這說明 FormData 類的 toString() 方法沒有實現(xiàn)得友好.
除了上面提取的 FormData.get 還有一個 FormData.getAll

示例如下:

function debugLogin(data){
    let fd = new FormData()
    for(var key in data){
        fd.append(key,data[key])
    }
    console.log(fd.getAll("name"))
    console.log(fd.getAll("age"))
}

debugLogin({
    name:"banxi",
    age: 18
})
2018年1月18日 20:18