使用 javascript FileReader API 时是否有文件大小限制？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20706418/
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
Are there file size limitations when using javascript FileReader API?
提问by Patrick Keane
You can use javascript FileReader API to display a preview of an image which is provided from a file input field. This comes in very useful in the sense that you don't have to use server side php and ajax to display the image.
您可以使用 javascript FileReader API 来显示从文件输入字段提供的图像的预览。这非常有用，因为您不必使用服务器端 php 和 ajax 来显示图像。
My question though is this:
我的问题是：
Is there any limit to the size of the image file being used? Like if a user was to select an image that is 20MB, would the filereader be able to handle it? And would the machines memory potentially become max-ed out?
正在使用的图像文件的大小是否有任何限制？就像如果用户要选择 20MB 的图像一样，文件阅读器是否能够处理它？机器内存可能会被最大化吗？
I'm testing just locally on my machine at the moment. I attempted to load a bmp file (53MB!), which took about 15 seconds to process and display on the page. Other files at 1/2MB generally display instantaneously.
我目前只是在我的机器上进行本地测试。我试图加载一个 bmp 文件（53MB！），这需要大约 15 秒来处理和显示在页面上。其他 1/2MB 的文件通常会立即显示。
It's probably not required, but here is my HTML file: (FYI: this code works well in supported browsers)
这可能不是必需的，但这是我的 HTML 文件：（仅供参考：此代码在受支持的浏览器中运行良好）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Dropzone File Upload</title>
</head>
<body>
<img id="uploadPreview" src="default.png" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<p id="uploadProgress"> </p>
<script type="text/javascript">
function PreviewImage() {
var avatar_image = document.getElementById("uploadImage");
var avatar_preview = document.getElementById("uploadPreview");
var avatar_progress = document.getElementById("uploadProgress");
if ( window.FileReader ) { //if supports filereader
var imgReader = new FileReader();
imgReader.readAsDataURL(avatar_image.files[0]); //read from file input
imgReader.onloadstart = function(e) {
avatar_progress.innerHTML = "Starting to Load";
}
imgReader.onload = function (imgReaderEvent) {
//if file is image
if (
avatar_image.files[0].type == 'image/jpg' ||
avatar_image.files[0].type == 'image/jpeg' ||
avatar_image.files[0].type == 'image/png' ||
avatar_image.files[0].type == 'image/gif' ||
avatar_image.files[0].type == 'image/bmp'
) {
avatar_preview.src = imgReaderEvent.target.result;
}
else {
avatar_preview.src = 'filetype.png';
}
}
imgReader.onloadend = function(e) {
avatar_progress.innerHTML = "Loaded!";
}
}
/* For no support, use ActiveX instead */
else {
document.getElementById("uploadPreview").src = "nosupport.png";
}
};
</script>
</body>
</html>
回答by AndreKR
It seems in Chrome 45 the limit is 261 MB.
似乎在 Chrome 45 中的限制是 261 MB。
Unfortunately there is no error (FileReader.error == null) when the size is above that limit, the result is just an empty string.
不幸的是，FileReader.error == null当大小超过该限制时没有错误 ( )，结果只是一个空字符串。
回答by ClemSndr
It appears there is no limitation on the filesize. I did the same thing as you in the past and noticed that the time before display is due to the storage in ram/browser. So the delay will depend on the user's computer. If you have to deal with a lot of big images (> 10MB) you can put a gif loader during the loading.
文件大小似乎没有限制。我过去和你做了同样的事情，并注意到显示前的时间是由于内存/浏览器中的存储。所以延迟将取决于用户的计算机。如果您必须处理大量大图像（> 10MB），您可以在加载过程中放置一个 gif 加载器。
