如何从输入的html元素获取文件数据[重复]答案

【问题标题】：How to get file data from input html element [duplicate]如何从输入的html元素获取文件数据[重复]
【发布时间】：2022-01-03 15:56:43
【问题描述】：

我正在尝试在 jscript 中对 UX 进行快速客户端文件检查，但我遇到了一个我不知道如何修复的错误。我正在通过输入获取文件：

我收到以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading '0')

每次我搜索如何执行此操作时，它都会为我提供已实施的解决方案。当我记录文件时，它会返回文件路径，所以也许这就是问题所在，它不能单独从文件路径中获取大小？

我尝试使用基于事件的方法，但我得到了同样的错误。

const MAXSIZEMB = 100000;

function checkSize() {
  const file = document.getElementById("file").value;
  console.log(file);
  const max = MAXSIZEMB * 1024 * 1024;
  if (file.files[0].size > max) {
    alert("Files size cannot exceed " + MAXSIZEMB + " MB");
    file = "";
  }
}

&lt;input type="file" name="file" id="file" onchange="checkSize()" /&gt;

【问题讨论】：

你当然不能重置 file = ""; 这是一个常量
@mplungjan 是的，我没有达到那么远，因为错误更早。 document.getElementById("file").value = ""; 应该可以正常工作吗？
“它不能单独从文件路径中获取大小”——嗯，不。那只是一个字符串。字符串不是文件。
@Quentin 可怜的骗子。 OP想要大小而不是读取客户端上的文件

标签： html file jscript

【解决方案1】：

你需要的是文件，而不是 file.value

出于明显的安全原因，您不能设置文件输入的值

您可以将文件输入包装在表单中并重置表单

const MAXSIZEMB = 100;
const max = MAXSIZEMB * 1024 * 1024;

function checkSize() {
  const file = document.getElementById("file").files[0];
  console.log(file.size)
  if (file.size > max) {
    alert("Files size cannot exceed " + MAXSIZEMB + " MB");
  }
}

&lt;input type="file" name="file" id="file" onchange="checkSize()" /&gt;

【讨论】：

好的，谢谢。应该很明显...