javascript 在本地存储来自 HTML 输入文件表单的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13655391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Storing the image from an HTML input file form locally
提问by Shuma
I was wondering if it is possible to store the image from
我想知道是否可以从
<input type="file" id="image">
locally. Would I have to store the image, or could I simply store the image location?
当地。我是否必须存储图像，或者我可以简单地存储图像位置？
For context, it's from a form that takes name, address etc from input forms, creates an object, stores it in an array and displays the array.
对于上下文，它来自一个表单，该表单从输入表单中获取名称、地址等，创建一个对象，将其存储在一个数组中并显示该数组。
采纳答案by Twisty
No. Since storing a file or accessing a file on the local OS would violate the permissions of the browser. So your scripts cannot access the content unless it has been uploaded to the server. Also different browsers handle the path of the file that has been selected in different ways. So you encounter a number of problems there.
不可以。因为在本地操作系统上存储文件或访问文件会违反浏览器的权限。因此，除非内容已上传到服务器，否则您的脚本无法访问该内容。不同的浏览器也以不同的方式处理已选择的文件的路径。所以你在那里遇到了许多问题。
That said, there are some ways to get around this that I will not discuss. Simply put, the image should be uploaded to the server in some fashion and then your scripts can reference the path or the image itself from the path that it was uploaded to.
也就是说，有一些方法可以解决这个问题，我不会讨论。简而言之，应该以某种方式将图像上传到服务器，然后您的脚本可以从上传到的路径中引用该路径或图像本身。
回答by Paul S.
Contrary to the other answers here, if you're using a modern browser you can get and store quite a bit about the contents of a file <input>using elm.files, FileReaderand window.localStorage. You can even tell the browser to save it again (default download behaviour).
与此处的其他答案相反，如果您使用的是现代浏览器，则可以<input>使用elm.files,FileReader和获取并存储相当多的文件内容window.localStorage。您甚至可以告诉浏览器再次保存它（默认下载行为）。
It should be noted that doing this does notmean you can set the .valueon the <input>node.
需要注意的是，这样做并不意味着您可以.value在<input>节点上设置。
Here is an example of what you can do, assuming a file has been chosen.
这是您可以执行的操作的示例，假设已选择文件。
// 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);
From here you can save in localStorage, create dataURIsetc. For example, Say from fileNamewe know the image is a .jpg, then you could display it by setting an <img>'s srcto "data:image/jpeg;base64," + base64.
从这里，你可以保存localStorage，创建dataURIs等。例如，假定从fileName我们知道的影像为.JPG，那么你可以通过设置显示它<img>的SRC来"data:image/jpeg;base64," + base64。
Note that any modification of this data will not have any effect on the original file chosen.
请注意，对此数据的任何修改都不会对所选的原始文件产生任何影响。
回答by ntadic
No way. But if you could that would raise serious security issues.
没门。但是，如果可以，那会引发严重的安全问题。
If you try to get value of your file input e.g.:
如果您尝试获取文件输入的值，例如：
document.getElementById('image').value
the value would be "C:\fakepath\somefile.txt"
该值将是“C:\fakepath\somefile.txt”
回答by bfavaretto
If you want to get the file name, or even display the image, you can do that using the File API(on browsers that support it). The path is not available for security reasons.
