使用javascript FileReader API时是否存在文件大小限制？ [英] Are there file size limitations when using javascript FileReader API?
问题描述
您可以使用javascript FileReader API显示从文件输入字段提供的图像预览。
这个非常有用，因为你不必使用服务器端的php和ajax来显示图像。
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.
我的问题是这个：
正在使用的图像文件的大小是否有限制？就像用户要选择20MB的图像一样，文件阅读器是否能够处理它？机器内存可能会被最大化吗？
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?
我目前正在我的机器上进行本地测试。我试图加载一个bmp文件（53MB！），大约需要15秒才能处理并显示在页面上。
1 / 2MB的其他文件通常会立即显示。
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.
这可能不是必需的，但这是我的HTML文件:(仅供参考：此代码在支持的情况下运行良好浏览器）
It's probably not required, but here is my HTML file: (FYI: this code works well in supported browsers)
<!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>
推荐答案
在Chrome 45中似乎限制为261 MB。
It seems in Chrome 45 the limit is 261 MB.
不幸的是，当大小超过该限制时，没有错误（ FileReader.error == null ）结果只是一个空字符串。
Unfortunately there is no error (FileReader.error == null) when the size is above that limit, the result is just an empty string.
这篇关于使用javascript FileReader API时是否存在文件大小限制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
