目录
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>