在本地存储来自 HTML 输入文件表单的图像答案

【问题标题】：Storing the image from an HTML input file form locally在本地存储来自 HTML 输入文件表单的图像
【发布时间】：2012-11-19 06:35:02
【问题描述】：

我想知道是否可以从

存储图像

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

本地。我是否必须存储图像，或者我可以简单地存储图像位置？

对于上下文，它来自一个表单，它从输入表单中获取名称、地址等，创建一个对象，将其存储在一个数组中并显示该数组。

【问题讨论】：

你的意思是标准文件上传吗？还是“本地”是指在客户端？选择的图片不是已经存在了吗？
图像在客户端，如果可能的话，我可以链接到文件，但是为了表单，有没有比使用文本框更简单的方法，用户可以输入完整的图像路径进入？这就是为什么我要进行文件上传输入，或者无论如何都要尝试。
你有没有看过这个：stackoverflow.com/questions/5903323/… 浏览器对值的处理方式不同，所以我猜你的策略行不通……

标签： javascript html image local

【解决方案1】：

与此处的其他答案相反，如果您使用的是现代浏览器，则可以使用 elm.files、FileReader 和 window.localStorage 获取和存储大量有关文件 <input> 的内容。你甚至可以告诉browser to save it again (default download behaviour)。

需要注意的是，这样做并不意味着你可以在<input>节点上设置.value。

以下是您可以执行的操作示例，假设文件已被选择。

// From <input> node
var elm = document.getElementById('image'),
    img = elm.files[0],
    fileName = img.name, // not path
    fileSize = img.size; // bytes

// By Parsing File
var reader = new FileReader(),
    binary, base64;
reader.addEventListener('loadend', function () {
    binary = reader.result; // binary data (stored as string), unsafe for most actions
    base64 = btoa(binary); // base64 data, safer but takes up more memory
}, false);
reader.readAsBinaryString(img);

从这里你可以保存在localStorage，创建dataURIs等。例如，从fileName说我们知道图像是一个.jpg，那么你可以通过设置显示它<img> 的 src 到 "data:image/jpeg;base64," + base64。

请注意，对此数据的任何修改都不会对所选的原始文件产生任何影响。

【讨论】：

【解决方案2】：

没办法。但如果可以的话，那会引发严重的安全问题。

如果您尝试获取文件输入的值，例如：

document.getElementById('image').value

值将是“C:\fakepath\somefile.txt”

【讨论】：

【解决方案3】：

没有。由于在本地操作系统上存储文件或访问文件会违反浏览器的权限。因此，除非已将内容上传到服务器，否则您的脚本无法访问内容。不同的浏览器也处理以不同方式选择的文件的路径。所以你会遇到很多问题。

也就是说，有一些方法可以解决这个问题，我不会讨论。简而言之，应该以某种方式将图像上传到服务器，然后您的脚本可以从上传到的路径中引用路径或图像本身。

【讨论】：

【解决方案4】：

如果您想获取文件名，甚至显示图像，您可以使用File API（在browsers that support it）来实现。出于安全原因，该路径不可用。

【讨论】：