Question

我想知道是否可以存储来自

的图像

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

本地。我是否必须存储图像，还是只需存储图像位置？

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

Answer 1

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

应该注意，执行此不意味着您可以在.value节点上设置<input>。

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

// 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来显示它。

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

Answer 2

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

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

Answer 3

没办法。但如果你这样做会引发严重的安全问题。

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

document.getElementById('image').value

值为＆＃34; C：\ fakepath \ somefile.txt＆＃34;

Answer 4

如果您想获取文件名，甚至显示图片，可以使用File API（browsers that support it）来执行此操作。出于安全原因，该路径不可用。

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

4 个答案: