form表單的應用：form對象自帶屬性和方法及提交時提交的數據.....

1.html中含有form表單

（1）html

<form id="picLoad" class="lt" style="width: 230px;" enctype="multipart/form-data">
    <label>
        <div class="upload">上傳圖片</div>
        <input id="doc-form-file" onchange="fileChange(this);" type="file" name="file" accept="image/jpeg,image/png" multiple>
    </label>
    <div>
        <img id="imgPreview" src="" width="200"/>
    </div>
</form>

<button onclick="addImage()">提交</button>

（2）js

<script>
    function fileChange(file){
        console.log(file.files);
        var reader = new FileReader();
        reader.readAsDataURL(file.files[0]);
        reader.onload = function(e){
            document.getElementById('imgPreview').src = e.target.result;
        }
    }
    function addImage(){
        var picLoad = document.getElementById('picLoad');
        var formData = new FormData(picLoad);             //根據現有form new一個FormData實例

        console.log(formData);                            //查看實例（這里看不出實例包含了哪些內容）
        console.log(formData.getAll("file"));             //獲取屬性為name為file的值，對應html中的name='file',file可任意命名

　　　　 var dsc = '參數1';     
        formData.append('dsc ',dsc);                      //為formData添加新值，通常提交到后台的數據既包含文件又包含其他數據時用

       console.log(formData.getAll("dsc"));                //獲取屬性為dsc的值

    }
</script>

點擊#doc-form-file選擇文件，我選擇的是一張圖片，選定后自動調用fileChange方法，這個方法的作用是預覽圖片（FileReader對象這里不做解釋，不了解的百度一下）
點擊提交按鈕調用addImage方法

1.html中沒有form表單，js中生成表單
（1）html

<div id="holder">

</div>

<button onclick="addImage()">提交</button>

（2）js

<script>
    var holder = document.getElementById('holder');
  
    holder.ondragover = function(){         //拖拽圖片到#holder 經過#holder時觸發

        this.className = 'over';            //圖片經過時盒子的樣式，可自行設計
        return false;                       //阻止元素默認事件
//        event.preventDefault()
    };
    
    holder.ondrop = function(e){           //一次拖拽事件結束  放開鼠標時觸發
        this.className = '';
        e.preventDefault();
        var files = e.dataTransfer.files; //獲取拖拽的內容
        console.log(files);
        viewHolder(files);
    };
    function viewHolder(files){             //圖片預覽
        while(holder.hasChildNodes()){
            holder.removeChild(holder.firstChild);
        }
        for(var i=0;i<files.length;i++){
            var reader = new FileReader();
            reader.readAsDataURL(files[i]);
            reader.onload = function(e){
                var image = new Image();
                image.src = e.target.result;
                image.width = 250;
                holder.appendChild(image);
            }
        }
    }
    function readFiles(files){                       //把拖拽的內容傳進來
        var formData = new FormData();               //創建FormData實例
        for(var i=0;i<files.length;i++){             //把files數組全部加入到實例中（可以拖拽多個文件）

            formData.append('file',files[i])
        }
       
        var dsc = '參數1';
        var tel = '參數2';
        formData.append('dsc',dsc);                 //添加參數
        formData.append('tel',tel);

　　　　　var xhr = new XMLHttpRequest();
        xhr.open('POST','/upload');
        xhr.onload = function(){
            location.href = '/home';
        };

        xhr.send(formData);                          /把數據傳給后台
    }
</script>


FormData 的一些方法：https://segmentfault.com/a/1190000006716454   //里面介紹很詳細  

創建一個formData對象實例有幾種方式
1、創建一個空對象實例

var formData = new FormData();
2、使用已有的表單來初始化一個對象實例

<form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密碼 <input type="submit" value="提交"> </form>

// 獲取頁面已有的一個form表單 var form = document.getElementById("myForm"); // 用表單來初始化 var formData = new FormData(form); // 我們可以根據name來訪問表單中的字段 var name = formData.get("name"); // 獲取名字 var psw = formData.get("psw"); // 獲取密碼 // 當然也可以在此基礎上，添加其他數據 formData.append("token","kshdfiwi3rh");
.......