于安全和隐私的原因，web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以通过使用input file和FileReader来实现。在这篇文章中，我们将通过一些例子来看看它是如何工作的。

文件操作的流程

获取文件

由于浏览器中的 JS 无法从用户的设备访问本地文件，我们需要为用户提供一种方法来选择一个或多个文件供我们使用。这可以通过文件选择器<input type='fule' />来完成。

<input type="file" id="fileInput">

如果想允选择多个文件，可以添加multiple属性:

<input type="file" id="fileInput" multiple>

我们可以通过change事件来监听文件的选择，也可以添加另一个 UI 元素让用户显式地开始对所选文件的处理。

input file 具有一个files属性，该属性是File对象的列表（可能有多个选择的文件）。

File对象如下所示：

读取文件

读取文件，主要使用的是[FileReader][1]类。

「该对象拥有的属性：」

「FileReader.error」 ：只读，一个DOMException，表示在读取文件时发生的错误 。

「FileReader.readyState」：只读 表示 FileReader 状态的数字。取值如下：

常量名值描述EMPTY0还没有加载任何数据LOADING1数据正在被加载DONE2已完成全部的读取请求

「FileReader.result」：只读，文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

「该对象拥有的方法：」

readAsText(file, encoding)：以纯文本形式读取文件，读取到的文本保存在result属性中。第二个参数代表编码格式。

readAsDataUrl(file)：读取文件并且将文件以数据URI的形式保存在result属性中。

readAsBinaryString(file)：读取文件并且把文件以字符串保存在result属性中。

readAsArrayBuffer(file)：读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

FileReader.abort()：中止读取操作。在返回时，readyState属性为DONE。

「文件读取的过程是异步操作，在这个过程中提供了三个事件：progress、error、load事件。」

progress：每隔50ms左右，会触发一次progress事件。

error：在无法读取到文件信息的条件下触发。

load：在成功加载后就会触发。

在下面的示例中，我们将使用readAsText和readAsDataURL方法来显示文本和图像文件的内容。

例一：读取文本文件

为了将文件内容显示为文本，change需要重写一下：

首先，我们要确保有一个可以读取的文件。如果用户取消或以其他方式关闭文件选择对话框而不选择文件，我们就没有什么要读取和退出函数。

然后我们继续创建一个FileReader。reader的工作是异步的，以避免阻塞主线程和 UI 更新，这在读取大文件(如视频)时非常重要。

reader发出一个'load'事件(例如，类似于Image对象)，告诉我们的文件已经读取完毕。

reader将文件内容保存在其result属性中。此属性中的数据取决于我们使用的读取文件的方法。在我们的示例中，我们使用readAsText方法读取文件，因此result将是一个文本字符串。

例二：显示本地选择的图片

如果我们想要显示图像，将文件读取为字符串并不是很有用。FileReader有一个readAsDataURL方法，可以将文件读入一个编码的字符串，该字符串可以用作<img>元素的源。本例的代码与前面的代码基本相同，区别是我们使用readAsDataURL读取文件并将结果显示为图像:

总结

1）由于安全和隐私的原因，JavaScript 不能直接访问本地文件。

2）可以通过 input 类型为 file 来选择文件，并对文件进行处理。

3） file input 具有带有所选文件的files属性。

4） 我们可以使用FileReader来访问所选文件的内容。

作者: Martin Splitt 译者：前端小智 来源：dev

原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn

本Pandas教程中，我们将详细介绍如何使用Pandas read_html方法从HTML中获取数据。首先，在最简单的示例中，我们将使用Pandas从一个字符串读取HTML。其次，我们将通过几个示例来使用Pandas read_html从Wikipedia表格中获取数据。在之前的一篇文章(关于Python中的探索性数据分析)中，我们也使用了Pandas从HTML表格中读取数据。

在Python中导入数据

在开始学习Python和Pandas时，为了进行数据分析和可视化，我们通常从实践导入数据开始。在之前的文章中，我们已经了解到我们可以直接在Python中输入值(例如，从Python字典创建Pandas dataframe)。然而,通过从可用的源导入数据来获取数据当然更为常见。这通常是通过从CSV文件或Excel文件中读取数据来完成的。例如，要从一个.csv文件导入数据，我们可以使用Pandas read_csv方法。这里有一个如何使用该方法的快速的例子，但一定要查看有关该主题的博客文章以获得更多信息。

现在，上面的方法只有在我们已经有了合适格式的数据(如csv或JSON)时才有用(请参阅关于如何使用Python和Pandas解析JSON文件的文章)。

我们大多数人会使用Wikipedia来了解我们感兴趣的主题信息。此外，这些Wikipedia文章通常包含HTML表格。

要使用pandas在Python中获得这些表格，我们可以将其剪切并粘贴到一个电子表单中，然后，例如使用read_excel将它们读入Python。现在，这个任务当然可以用更少的步骤来完成:我们可以通过web抓取来对它进行自动化。一定要查看一下什么是web抓取。

先决条件

当然，这个Pandas读取HTML教程将要求我们安装Pandas及其依赖项。例如，我们可以使用pip来安装Python包，比如Pandas，或者安装一个Python发行版(例如，Anaconda、ActivePython)。下面是如何使用pip安装Pandas: pip install pandas。

注意，如果出现消息说有一个更新版本的pip可用，请查看这篇有关如何升级pip的文章。注意，我们还需要安装lxml或BeautifulSoup4，当然，这些包也可以使用pip来安装: pip install lxml。

Pandas read_html 语法

下面是如何使用Pandas read_html从HTML表格中抓取数据的最简单的语法:

现在我们已经知道了使用Pandas读取HTML表格的简单语法，接下来我们可以查看一些read_html示例。

Pandas read_html 示例1:

第一个示例是关于如何使用Pandas read_html方法的，我们将从一个字符串读取HTML表格。

现在，我们得到的结果不是一个Pandas DataFrame，而是一个Python列表。也就是说，如果我们使用type函数，我们可以看到:

如果我们想得到该表格，我们可以使用列表的第一个索引(0)

Pandas read_html 示例 2:

在第二个Pandas read_html示例中，我们将从Wikipedia抓取数据。实际上，我们将得到蟒科蛇(也称为蟒蛇)的HTML表格。

现在，我们得到了一个包含7个表(len(df))的列表。如果我们去Wikipedia页面，我们可以看到第一个表是右边的那个。然而，在本例中，我们可能对第二个表更感兴趣。

Pandas read_html 示例 3:

在第三个示例中，我们将从瑞典的covid-19病例中读取HTML表。这里，我们将使用read_html方法的一些附加参数。具体来说，我们将使用match参数。在此之后，我们还需要清洗数据，最后，我们将进行一些简单的数据可视化操作。

使用Pandas read_html和匹配参数抓取数据：

如上图所示，该表格的标题为:“瑞典各郡新增COVID-19病例”。现在，我们可以使用match参数并将其作为一个字符串输入：

通过这种方式，我们只得到这个表，但它仍然是一个dataframes列表。现在，如上图所示，在底部，我们有三个需要删除的行。因此，我们要删除最后三行。

使用Pandas iloc删除最后的行

现在，我们将使用Pandas iloc删除最后3行。注意，我们使用-3作为第二个参数(请确保你查看了这个Panda iloc教程，以获得更多信息)。最后，我们还创建了这个dataframe的一个副本。

在下一节中，我们将学习如何将多索引列名更改为单个索引。

将多索引更改为单个索引并删除不需要的字符

现在，我们要去掉多索引列。也就是说，我们将把2列索引(名称)变成唯一的列名。这里，我们将使用DataFrame.columns 和 DataFrame.columns,get_level_values:

最后，正如你在“date”列中所看到的，我们使用Pandas read_html从WikiPedia表格抓取了一些注释。接下来，我们将使用str.replace方法和一个正则表达式来删除它们:

使用Pandas set_index更改索引

现在，我们继续使用Pandas set_index将日期列变成索引。这样一来，我们稍后就可以很容易地创建一个时间序列图。

现在，为了能够绘制这个时间序列图，我们需要用0填充缺失的值，并将这些列的数据类型更改为numeric。这里我们也使用了apply方法。最后，我们使用cumsum方法来获得列中每个新值累加后的值:

来自HTML表格的时间序列图

在最后一个示例中，我们使用Pandas read_html获取我们抓取的数据，并创建了一个时间序列图。现在，我们还导入了matplotlib，这样我们就可以改变Pandas图例的标题的位置:

结论: 如何将HTML读取到一个 Pandas DataFrame

在这个Pandas教程中，我们学习了如何使用Pandas read_html方法从HTML中抓取数据。此外，我们使用来自一篇Wikipedia文章的数据来创建了一个时间序列图。最后，我们也可以通过参数index_col来使用Pandas read_html将' Date '列设置为索引列。

英文原文：https://www.marsja.se/how-to-use-pandas-read_html-to-scrape-data-from-html-tables
译者：一瞬