xhr与FormData对象的使用

<form id="myForm">
    <input type="text" name="username">
    <input type="password" name="pws">
    <textarea name="txt"></textarea>

    <!-- 文件域：用于进行文件选取 -->
    <input type="file" name="avatar">

    <button type="button" id="btn">按钮</button>
  </form>
  <!-- 这个img用于显示上传后的线上图片 -->
  <img src="" alt="" id="pic">
      
<script>
    // 1 按钮点击事件
    var btn = document.getElementById('btn');
    var myForm = document.getElementById('myForm');
    var pic = document.getElementById('pic');


    btn.onclick = function () {
      // 2 使用fd管理表单数据
      var fd = new FormData(myForm);

      // 3 将表单提交给服务器（包含了要上传的文件）
      var xhr = new XMLHttpRequest();
      xhr.open('post', '接口');
      xhr.send(fd);

      // 响应内容中具有上传的图片文件的线上地址，可以进行访问
      xhr.onload = function () {
        if (xhr.status === 200) {
          var res = JSON.parse(xhr.responseText);
          pic.src = '接口' + res.url;
        }
      }
    };
  </script>

<!-- 如果要上传的是一个单独的表单域，没有form结构，需要进行单独处理 -->
  <input type="file" id="ipt">
  <!-- 由于没有form，button就不存在提交的问题 -->
  <button id="btn">提交</button>

  <img src="" alt="" id="pic">

  <script>
    var btn = document.getElementById('btn');
    var ipt = document.getElementById('ipt');
    var pic = document.getElementById('pic');

    // 1 设置点击按钮事件
    btn.onclick = function () {
      // 2 创建FormData对象
      var fd = new FormData();
      // 3 根据需求将数据添加到fd中
      //   - 如何进行文件添加
      //     - 1 找到文件域中选择的文件
      //       - ipt.files[0] 代表了要上传的文件
      //       - ipt.files.length 代表选择文件的个数，如果为0说明没选文件   
      //     - 2 使用append将文件添加到fd中即可
      fd.append('fileUpload', ipt.files[0]);

      // 4 发送请求
      var xhr = new XMLHttpRequest();
      xhr.open('post', '接口');
      xhr.send(fd);

      // 5 接收响应，可以将线上图片地址进行展示
      xhr.onload = function () {
        if (xhr.status === 200) {
          pic.src = '接口' + JSON.parse(xhr.responseText).url;
        }
      }
    };

<!-- 如果要上传的是一个单独的表单域，没有form结构，需要进行单独处理 -->
 <input type="file" id="ipt">
 <!-- 操作按钮 -->
 <button id="btn">提交</button>
 <!-- 用于展示线上的图片地址 -->
 <img src="" alt="" id="pic">


 <script src="./lib/jquery.js"></script>
 <script>
   // 1 设置按钮的点击事件
   $('#btn').on('click', function () {
     // 2 获取文件域的文件信息
     var files = $('#ipt')[0].files;
     console.log(files);

     // 3 检测是否上传了文件
     if (files.length === 0) {
       return;
     }
     // 4 创建FormData对象
     var fd = new FormData();
     fd.append('uploads', files[0]);

     // 5 通过jQuery的ajax发送这个FormData
     $.ajax({
       type: 'post',
       url: '接口',
       // 将fd直接设置给data
       data: fd,
       // 如果要发送FormData，必须设置以下属性
       contentType: false, // 无需jQuery设置请求参数的内容类型
       processData: false, // 无需jQuery进行数据处理
       success: function (res) {
         if (res.status === 200) {
           $('#pic').prop('src', '接口' + res.url)
         }
       }
     });
   });
 </script>