XMLHttpRequest —— 文件上傳

包容萬象，異步轉運

前序：

• XMLHttpRequest 異步
• form表單解析
• multipart/form-data格式
• 可重複的鍵值對（這點特別有意思）

1.直奔主題

<input type="file" multiple="multiple" class="upload-first" />
<input type="file" multiple="multiple" class="upload-second" />
  <button id="uploadBtn">上傳</button>
<script>
// 樣例親自測試過，均可運行，使用2種獲取dom對象方式
// 使用原生js，只爲展示功能，客官可根據自己所使用的自行切換寫法

var  formData = new FormData();
// 綁定input change事件  
document.getElementsByClassName("upload-first")[0].addEventListener("change", function(){
        let file =document.getElementsByClassName("upload-first")[0].files[0];
        formData.append("file", file);
});
document.getElementsByClassName("upload-second")[0].addEventListener("change", function(){
        let file =document.getElementsByClassName("upload-second")[0].files[0];
        formData.append("file", file);
});
document.getElementById('uploadBtn').addEventListener("click", function(){
  let xhr = new XMLHttpRequest();
  xhr.onload = function (event) {
            console.log('上傳成功');
        }
  // 參數一：請求類型
  // 參數二：請求地址，請替換爲實際地址
  // 參數三：是否異步，默認異步，可不填，建議默認
  xhr.open('POST', 'http://localhost:8888//***', true);
  xhr.send(formData);
});
</script>