美文网首页
XMLHttpRequest —— 文件上传

XMLHttpRequest —— 文件上传

作者: 潇潇剑_易水阁 | 来源:发表于2020-06-22 21:11 被阅读0次

    包容万象,异步转运

    前序:

    • 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>
    

    相关文章

      网友评论

          本文标题:XMLHttpRequest —— 文件上传

          本文链接:https://www.haomeiwen.com/subject/uftffktx.html