js上传文件；input上传文件；-蒲公英云

js上传文件；input上传文件；

小灰灰 2021-09-07 06:20 763阅读 0赞

html原生上传文件方式1：
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <script></script>
  </head>
  <body>
    <div>
      选择文件(可多选):
      <input type="file" id="f1" multiple /><br /><br />
      <button type="button" id="btn-submit">上 传</button>
    </div>
    <script>
      function submitUpload() { 
        //获得文件列表，注意这里不是数组，而是对象
        var fileList = document.getElementById("f1").files;
        console.log(document.getElementById("f1"), fileList);
        if (!fileList.length) { 
          alert("请选择文件");
          return;
        }
        var file = new FormData(); //构造FormData对象
        // file.append('title', document.getElementById('title').value);
        //多文件上传需要遍历添加到 fromdata 对象
        for (var i = 0; i < fileList.length; i++) { 
          file.append("file", fileList[i]); //支持多文件上传
        }
        for (var value of file.values()) { 
          console.log(value);
        }
        console.log(file);
        var xhr = new XMLHttpRequest(); //创建对象
        xhr.open("POST", "https://dcdn-jiazheng.21cs.cn/file/upload");
        // xhr.setRequestHeader("Content-Type", "multipart/form-data");
        // xhr.setRequestHeader("Authorization", token);
        xhr.send(file); //发送时 Content-Type默认就是: multipart/form-data;
        xhr.onreadystatechange = function () { 
          console.log("state change", xhr.readyState);
          if (this.readyState == 4 && this.status == 200) { 
            var obj = JSON.parse(xhr.responseText); //返回值
            console.log(obj);
            if (obj.data) { 
              alert("上传成功");
            }
          }
        };
      }
      //绑定提交事件
      document
        .getElementById("btn-submit")
        .addEventListener("click", submitUpload);
    </script>
  </body>
</html>

html原生上传文件方式2：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #progress { 
        height: 10px;
        width: 500px;
        border: 1px solid gold;
        position: relative;
        border-radius: 5px;
      }
      #progress .progress-item { 
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: chartreuse;
        border-radius: 5px;
        transition: width 0.3s linear;
      }
    </style>
  </head>
  <body>
    文件上传框<br />
    <input type="file" id="file" /><br />
    显示进度条<br />
    <div id="progress">
      <div class="progress-item"></div>
    </div>
    上传成功后的返回内容<br />
    <span id="callback"></span>
  </body>
  <script>
    //首先监听input框的变动，选中一个新的文件会触发change事件
    document.querySelector("#file").addEventListener("change", function () { 
      //获取到选中的文件
      var file = document.querySelector("#file").files[0];
      //创建formdata对象
      var formdata = new FormData();
      formdata.append("file", file);
      //创建xhr，使用ajax进行文件上传
      var xhr = new XMLHttpRequest();
      xhr.open("post", "https://dcdn-jiazheng.21cs.cn/file/upload");
      //回调
      xhr.onreadystatechange = function () { 
        if (xhr.readyState == 4 && xhr.status == 200) { 
          document.querySelector("#callback").innerText = xhr.responseText;
        }
      };
      //获取上传的进度
      xhr.upload.onprogress = function (event) { 
        if (event.lengthComputable) { 
          var percent = (event.loaded / event.total) * 100;
          document.querySelector("#progress .progress-item").style.width =
            percent + "%";
        }
      };
      //将formdata上传
      xhr.send(formdata);
    });
  </script>
</html>