使用 javascript FileReader API 时是否有文件大小限制？答案

【问题标题】：Are there file size limitations when using javascript FileReader API?使用 javascript FileReader API 时是否有文件大小限制？
【发布时间】：2023-03-10 01:33:02
【问题描述】：

您可以使用 javascript FileReader API 来显示从文件输入字段提供的图像的预览。这非常有用，因为您不必使用服务器端 php 和 ajax 来显示图像。

我的问题是这样的：

对使用的图像文件的大小有任何限制吗？就像用户要选择 20MB 的图像一样，文件阅读器是否能够处理它？机器内存是否会被耗尽？

目前我只是在我的机器上进行本地测试。我试图加载一个 bmp 文件（53MB！），它需要大约 15 秒来处理并显示在页面上。其他 1/2MB 的文件通常会立即显示。

这可能不是必需的，但这是我的 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">&nbsp;</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>

【问题讨论】：

This answer 建议内存是您的主要限制。
任何像这样的容量问题总是有相同的答案：它会一直工作直到它不起作用，这取决于客户的能力。廉价智能手机的容量不如拥有大量 RAM 的台式电脑。

标签： javascript filereader

【解决方案1】：

Chrome 45 的限制似乎是 261 MB。

不幸的是，当大小超过该限制时没有错误 (FileReader.error == null)，结果只是一个空字符串。

【讨论】：

我刚刚注意到一些相当大的数据集：读取一个 257MB 的文件，但一个 459MB 的文件返回一个空字符串，Chrome 49。
@PaulAlexander 我找不到任何东西。我注意到这个数字在最大 Javascript 字符串长度的范围内，即 2^28 或 2^29 或类似的东西。
这太臭了。有什么办法吗？我应该如何以 AJAX 形式序列化文件数据？
这确实需要官方文档！

【解决方案2】：

文件大小似乎没有限制。我过去和你做过同样的事情，并注意到显示前的时间是由于内存/浏览器中的存储。所以延迟将取决于用户的计算机。如果您必须处理大量大图像（> 10MB），您可以在加载过程中放置一个 gif 加载器。

【讨论】：

gif 加载器是个好主意，我必须添加它。通常，我希望文件大小在较低的范围内，但我也希望能够支持文件大小较大的情况，而不是比有文件大小限制。 #uploadPreview 处理这么大的文件会有什么问题吗，还是无关紧要？
这对于#uploadPreview 来说根本不是问题。但请记住，如果图像具有高分辨率（例如 2000x2000）并且 #uploadPreview 是一个小框（例如 100x100），则图像将被缩小并且您会注意到图像上的一些锯齿。
这是不正确的，正确答案是有硬性限制。