Question

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

Answer 1

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

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

Answer 2

看来文件大小没有限制。我过去做了同样的事情，并注意到显示之前的时间是由于存储在ram / browser中。所以延迟将取决于用户的计算机。如果你需要处理很多大图像（> 10MB），你可以在加载过程中放一个gif加载器。

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

2 个答案: