JS手写上传文件、React手写上传文件

最新推荐文章于 2024-05-23 15:38:49 发布

强壮的糙汉子

最新推荐文章于 2024-05-23 15:38:49 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/m0_60622481/article/details/128473088

版权

这篇博客详细介绍了如何使用JavaScript和React进行文件上传的实现。在JS部分，作者展示了手动实现的过程；在React部分，利用useState进行文件对象的存储。

摘要由CSDN通过智能技术生成

JS手写

React上传文件

JS手写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="selectFile('xlsx',data)">点击我上传文件</button>
  </body>

  <script>
    //调用系统文件
    function selectFile(access, callBack) {
      const input = document.createElement("input");
    // type为file文件类型
      input.type = "file";
      input.accept = `${access}`;
      input.click();
      input.onchange = () => {
        if (input.files) {
          const file = input.files[0];