如何将本地文件定义为 DOM 对象？答案

【问题标题】：How to define a local file as a DOM object?如何将本地文件定义为 DOM 对象？
【发布时间】：2016-10-21 09:55:24
【问题描述】：

我想使用 JavaScript 解析计算机中的数据。我使用papa parse。

在 PapaParse 文档中已声明可以通过以下代码解析本地文件；

Papa.parse(file, config)

在文档中他们说 file 是从 DOM 获得的 File 对象。如何将本地文件定义为 DOM 对象？

【问题讨论】：

见developer.mozilla.org/en-US/docs/Web/API/File
是的，但我不清楚。我需要一个例子。我不是很擅长js。在 API 中是这样解释的； new File( Array parts, String filename, BlobPropertyBag properties );我试过了，还是没能成功。
@bukowski — 该代码具有“来自 XPCOM 组件代码”的注释，因此无论如何它都不适合您。阅读页面上的第二段。以“文件对象通常是”开头的那个。另请参阅页面的“另请参阅”部分。
我已经检查了您建议的所有目录，但我仍然无法解决我的问题。我不想选择和“输入”一个文件。我想将文件定义为变量。（如文本变量）并在解析器上使用该变量。是否可以在脚本端读取文件并将它们用作变量？
我遇到了同样的问题。你有想过吗？我只想让页面加载我存储为 csv 的数据，以便显示 csv 数据。这与安全无关。

标签： javascript parsing dom papaparse

【解决方案1】：

我怀疑这是可能的，因为这将是一个巨大的安全问题。想象一下，当您通过浏览器加载他们的 javascript 时，有人可以从您的计算机中读取文件。您必须使用文件选择器。

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input type="file" id="csv-files" multiple>
<script>
  var handleFileSelect(evt) {
    var file = evt.target.files[0];
    // do stuff with that file e.g. Papa.parse(file)

  }

  $(document).ready(function() {
    $("#csv-files").change(handleFileSelect);
  });
</script>

上面的代码在使用文件选择器时使用jQuery来加载文件。

请参阅joyofdata.de/parsing-local-csv-file 以供参考。简明扼要的解释。

【讨论】：