将 HTML 输入文件表单中的图像存储在本地

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

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

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

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

与这里的其他答案相反，如果您使用现代浏览器，您可以获取并存储相当多的文件内容<input> using elm.files, FileReader and window.localStorage。你甚至可以告诉浏览器再次保存（默认下载行为）.

需要注意的是，这样做does not意味着你可以设置.value on the <input> node.

这是您可以执行的操作的示例，假设有一个文件已被选择.

// 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>'s src to "data:image/jpeg;base64," + base64.

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