js如何实现上传文件时将文件读取出来

我会带着你远行 2023-09-27 17:47 6阅读 0赞

**目录**

1.上传功能实现

2.将上传的文件读取出来

3.完整代码demo

--------------------

#### 1.上传功能实现 ####

> 第一步，使用input标签，将type设置为type="file"
> 
> 第二步，给input设置change事件，在响应的回调函数中通过target.file获得上传的文件
> 
> 注意：由于input的默认样式很丑，我们平时开发时，一般将input按钮隐藏，然后写一个自己的按钮，当点击我们设置的按钮时，再给默认的input一个点击即可。

--------------------

#### 2.将上传的文件读取出来 ####

> 实现此功能的核心api是FileReader()
> 
> 通过实例化FileReader()，可以获得上传文件的具体内容
> 
>     reader.onload = function () {
>                       console.log(reader.result,'reader');//文件结果
>                     }
>                      reader.readAsText(File) //作为txt

--------------------

#### 3.完整代码demo ####

可以直接打开，进行测试。

<!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>
        <input type="file" onchange="upload()"></input>
        <script>
        function upload(event) {
                    var e = window.event||event;
                    console.log(e)
                    // 获取当前选中的文件
                    var File = e.target.files[0];
                    console.log(File,'获取当前选中的文件');//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了
                    let reader = new FileReader()
                    //将上传的文件读取成text
                    reader.onload = function () {
                      console.log(reader.result,'reader');
                    }
                     reader.readAsText(File)
                }
        </script>
      </body>
    </html>