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

Question

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

的图像

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

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

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

Answer 1

与此处的其他答案相反，如果您使用的是现代浏览器，您可以获得并存储大量关于文件内容的信息 <input> 使用 elm.files , 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 .

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