# 筆記_formdata練習
----

###### tags: `檔案上傳` `javascript` `Ajax` `FormData`

### 直接使用FormData
html上有`form`元素
直接使用FormData

將整個表單交給FormData（）進行處理

// 直接用 $('form')[0]; 可以抓到Form
// 但是建議還是用ID抓Form
// 避免畫面上有多個Form

// You need to use standard javascript object here
var form = $('#form1')[0];  // 上下效果相同  
var form = $('form')[0];
var formData = new FormData(form);

還可以使用append

    var form = $('form')[0];
    var formdata = new FormData(form);
    formdata.append('test', 'hellow!');

如何看FormData裡的東西

    var obj = {};

    for(var i of formdata.entries()){
        //console.log(i);
        //console.log('key:' + i[0] + ' value:' + i[1]);
        obj[i[0]] = i[1];
    }
    
    console.log(formdata.entries());
    json = JSON.stringify(obj);
    console.log(json);

取值

    console.log(formdata.getAll('name'));

GET FILE
訪問所選文件
[使用Web應用程序中的文件](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Accessing_selected_files)

    //get file
    // 這些方法不行！！！
    var file_js = document.getElementById('file').files;
    var file_jq = $('#file')[0].files;

    // 這些可以
    var file_js = document.getElementById('file').files[0];
    var file_jq = $('#file').prop('files')[0];
    var file_jq = $('#file')[0].files[0];