使用路径读取图像文件答案

【问题标题】：read image file using path使用路径读取图像文件
【发布时间】：2017-08-10 10:43:40
【问题描述】：

是否可以使用绝对路径从本地磁盘读取javascript 或typescript 中的图像文件。

我读到出于安全原因，浏览器不允许访问绝对路径和文件系统。

这是真的吗？或者有什么办法可以访问本地文件？

【问题讨论】：

如果你只是想阅读，这是可能的。但据我所知，无法编写/编辑文件。

标签： javascript html typescript

【解决方案1】：

嘿，您可以从浏览器的页面选项中保存页面，并且可以使用绝对路径附加图片

通过单击浏览器上的右键另存为选项将网站页面保存在本地，并且可以使用绝对或相对路径设置任何本地图像

【讨论】：

【解决方案2】：

如果您只想读取文件的内容，您可以不要求用户输入。比如：

document.getElementById("fileUpload").addEventListener("change", function() {
  alert(this.files[0].name)
});

&lt;input type="file" id="fileUpload"/&gt;

【讨论】：

您认为在项目中使用文件创建资产并在
@WalterWhite 哦，这些文件资产是您的项目附带的吗？它们是否托管在同一台服务器上？
文件托管在本地机器上，数据来自扫描仪，guid = 文件名从服务器作为 json 发送。
@WalterWhite 是的，如果您有用户与服务器交互，您只能访问用户提供给您的文件。所以我认为<input type="file"/> 是你最好的选择。另一种选择是在用户的机器上运行一个客户端应用程序，并通过它向你的服务器发送文件，但我可能比你需要的更多。

【解决方案3】：

您无法从路径读取浏览器中的文件。要读取文件的内容，您需要一个File 对象，该对象由<input type="file"> 输入或通过拖放生成。

换句话说，您需要用户向您提供要读取的文件 - 您不能简单地从硬盘读取任意文件（有充分的理由 - 我们不希望网站能够简单地读取我们的所有文件） .

【讨论】：

@Brijolaxew 这对于在项目中创建资产并将它们存储和资产目录以及稍后在中使用非常有用

【解决方案4】：

以下是使用 javascript 读取语言环境文件 test.csv 的示例代码：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
    </head>
    <body>
        <script type="text/javascript">
            // Check for the various File API support.
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                console.log("File APIs are supported !");
            } else {
                console.log('The File APIs are not fully supported in this browser.');
            }
            //Create a test.csv in the same path as this .html
            $.get('test.csv', function(data){
                console.log(data);
            });

        </script>
    </body>

</html>

注意：将test.csv 放在.html 的同一目录中，然后测试Firefox。如果您不在服务器中同时托管 .html 和 test.csv，则在 google chrome 中，您将收到 crossOrigin 错误。

【讨论】：

它加载正确，您看到的错误是因为服务器上没有test.csv 只需将html 代码复制粘贴到index.html 并在同一路径中写入一个虚拟test.csv。并在浏览器中打开

【解决方案5】：

你试过了吗？

https://developer.mozilla.org/en/docs/Web/API/FileReader

来自链接：

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

【讨论】：

是的，我试试这个，当我们不使用路径时，这是一个不错的选择。返回的文件也不包含文件路径。
我认为不可能从 javascript 获取绝对路径。如果这是可能的，一个网页可以读取您的整个文件系统，而无需在您的计算机上安装任何东西。