Существуют ли ограничения по размеру файла при использовании JavaScript FileReader API?

Вы можете использовать javascript FileReader API для отображения предварительного просмотра изображения, которое предоставляется из поля ввода файла. Это очень полезно в том смысле, что вам не нужно использовать php и ajax на стороне сервера для отображения изображения.

Мой вопрос, хотя это:

Есть ли ограничение на размер используемого файла изображения? Например, если пользователь выберет изображение размером 20 МБ, сможет ли считыватель файлов справиться с этим? И не станет ли память машин максимально заполненной?

Я сейчас тестирую только локально на своей машине. Я попытался загрузить bmp-файл (53 МБ!), Что заняло около 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>
Источник

2 ответа

Похоже, в Chrome 45 ограничение составляет 261 МБ.

К сожалению ошибки нет (FileReader.error == null), когда размер превышает этот предел, результатом является просто пустая строка.

Источник

Похоже, что нет никаких ограничений на размер файла. В прошлом я делал то же самое, что и вы, и заметил, что время до отображения связано с хранением в ram/browser. Так что задержка будет зависеть от компьютера пользователя. Если вам приходится иметь дело с большим количеством больших изображений (> 10 МБ), вы можете установить gif-загрузчик во время загрузки.

Источник
Другие вопросы по тегам