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

Question

我想知道是否可以存储图像

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

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

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

Answer 1

相反,这里其他的答案,如果您使用的是现代的浏览器,您可以获取和存储相当多的有关文件的内容,<input>使用elm.files,FileReader和window.localStorage.您甚至可以告诉浏览器再次保存它(默认下载行为).

应该注意的是,这样做并不意味着您可以.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

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

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