XMLHttpRequest —— 文件上传

最新推荐文章于 2024-08-27 11:22:49 发布

原创最新推荐文章于 2024-08-27 11:22:49 发布 · 841 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了如何使用XMLHttpRequest进行文件异步上传，重点解析了form表单和multipart/form-data格式，还提及了可重复键值对在上传过程中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

包容万象，异步转运

前序：

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>