JavaScript FileReader 实例化：为什么不直接在构造函数中传入文件对象？

深入探讨JavaScript FileReader的实例化方法

在JavaScript中处理文件上传时，FileReader对象扮演着关键角色。本文将解释为什么我们通常先实例化FileReader对象，然后再调用其读取方法，而不是直接在构造函数中传入文件对象。

网页通常使用元素选择文件，并在onchange事件中处理。一个典型例子如下：

function handleFileSelect() {  const fileInput = document.getElementById('fileInput'); // 假设id为fileInput  const file = fileInput.files[0];  const fileReader = new FileReader();  if (file) {    fileReader.readAsDataURL(file);  }  fileReader.addEventListener('load', () => {    const result = fileReader.result;    const resultContainer = document.getElementById('result');    const img = document.createElement('img');    img.src = result;    resultContainer.appendChild(img);  }, { once: true });}

登录后复制