如何获取 <input type=file> 中的实际文件，以使用 JavaScript 显示在 <textarea> 标记中？

Question

我有一个 type=file 的输入标签，我想获取它选择显示在 textarea 标签内的数据。我不想只显示文件标题，而是显示整个文件。就像在发送电子邮件之前将附件上传到电子邮件一样。 我如何使用 javascript 执行此操作？这项工作还没有后端或服务器端代码。我试图更改该值，但它只将文件的对象类型显示到文本区域

let textfile = document.getElementById('file')
let textarea = document.getElementById('compose')
console.log(textarea);

textfile.addEventListener('change', (e) =>{
    let fil = e.target.files[0];

    if(fil){
        let reader = new FileReader();
        reader.readAsDataURL(fil);
    }

    textarea.value = fil 
})

Answer 1

举个例子：

使用

FileReader

API

，所以它会读取文件的内容然后你应该添加

onload

函数只在加载

FileReader

之后获取数据，然后设置

textarea的值属性

文件内容的元素。

let textfile = document.getElementById('file');
let textarea = document.getElementById('compose');

textfile.addEventListener('change', (e) => {
    let file = e.target.files[0];
    if (file) {
        let reader = new FileReader();

        reader.onload = function(e) {
            textarea.value = e.target.result;
        }
        reader.readAsText(file);
    }
});

<div>
  <input type="file" id="file">
</div>
<div>
  <textarea id="compose" rows="5" cols="50"></textarea>
</div>