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

最新推荐文章于 2024-05-24 16:46:26 发布

i_am_a_div_日积月累_

最新推荐文章于 2024-05-24 16:46:26 发布

阅读量365

点赞数

分类专栏： js 文章标签：文件上传 js上传文件 input上传文件

本文链接：https://blog.csdn.net/i_am_a_div/article/details/115190558

版权

js 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

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>

其他好的上传组件

i_am_a_div_日积月累_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js上传文件；input上传文件；

html原生上传文件方式1：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Document</title> <script></script> </head> <body> <div> 选择文件(可多选): <input
复制链接

扫一扫