使用javascript FileReader API时是否存在文件大小限制？

Question

使用javascript FileReader API时是否存在文件大小限制？

您可以使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

And*_*eKR 13

在Chrome 45中似乎限制为261 MB.

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

确实需要为此提供官方文档！ (3认同)

Answer 2

小智 -2

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

归档时间：	12 年，1 月前
查看次数：	11961 次
最近记录：	10 年，4 月前