Js 实现带进度条的上传文件 预览
前面说了File对象是Blob对象的子类,在html里每出现一个type为file的input标签,在解析dom结构的时候,这个标签就不单单只是一个input DOM对象,而是会被对应着一个fileUpload对象,通过fileUpload.files我们可以获得一个fileList对象,fileList对象是一个文件列表,里面包含需要上传的文件对象,通过文件列表我们可以拿到我们需要的文件对象,由此拿到该文件的一些信息。我们可以先看一下可以拿到哪些信息
写一个简单的上传文件的表单:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="file" id="file"/>
<input type="submit" value="submit">
</form>
</body>
</html>
通过监听input的change事件获取文件对象
let fileInput = document.querySelector('#file')
fileInput.addEventListener('change',() => console.log(fileInput.files[0]))
从打印的结果可以看出,可以拿到的的信息有:
- 最近修改时间 lastModified(时间戳)
- 最近修改时间 lastModified(时间对象)</