前端将上传的txt文件内容及上传的图片展示到页面中

今天接到一个新需求，需要将上传的txt文件内容展示到页面中，我在想如果是前端去处理，那该如何做呢？

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

将上传的txt文件内容解析到页面上：

<input type="file">
<div id="txtContent"></div>
<div id="imgContent"></div>

const input = document.querySelector('input[type=file]')

input.addEventListener('change', () => {
    const reader = new FileReader()
    reader.readAsText(input.files[0], 'utf8') // input.files[0]为第一个文件
    reader.onload = () => {
        $("#txtContent").html(reader.result)// reader.result为获取结果
    }
}, false)

将上传的图片解析到页面上：

const input = document.querySelector('input[type=file]')

input.addEventListener('change', () => {
    const reader = new FileReader()
    reader.readAsDataURL(input.files[0]) // input.files[0]为第一个文件
    reader.onload = () => {
        const img = new Image()
        img.src = reader.result
        $("#imgContent").html(img)  // reader.result为获取结果
        }
}, false)