5

我想知道是否可以从

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

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

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

4

4 回答 4

12

与此处的其他答案相反，如果您使用的是现代浏览器，则可以<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设置为 .jpg来显示它"data:image/jpeg;base64," + base64。

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

于 2012-12-01T02:10:12.620 回答
2

没门。但是，如果可以，那将引发严重的安全问题。

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

document.getElementById('image').value

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

于 2012-12-01T01:25:25.893 回答
1

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

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

于 2012-12-01T01:23:26.120 回答
0

如果您想获取文件名，甚至显示图像，您可以使用File API（在支持它的浏览器上）来实现。出于安全原因，该路径不可用。

于 2012-12-01T02:09:43.243 回答