Задать вопрос
Ответы пользователя по тегу JavaScript
  • Можно-ли отобразить изображение без загрузки его на сервер?

    mastak
    @mastak
    Создаю и успешно развиваю интернет-проекты
    Да, можно, через объект FileReader. У меня есть вот такая функция на JavaScript, она вам пригодится.

    <input type="file" id="file1" accept="image/jpeg" onchange="previewUploadedPhoto('file1', 'previewArea');" />
    <div id="previewArea"></div>


    // Preview uploaded photo
    function previewUploadedPhoto(controlID, previewID) {
        if (document.getElementById(controlID).files) {
            var file = document.getElementById(controlID).files[0];
            if (file.type.match("image.*")) {
                if (parseInt(file.size) <= 4 * 1024 * 1024) {
                    var reader = new FileReader();
                    reader.onload = (function (theFile) {
                        return function (e) {
                            var img = new Image();
                            img.src = e.target.result;
    
                            img.onload = function () {
                                if (img.width + img.height < 1000) {
                                    $("#" + previewID).html("<b>Выбранный файл слишком маленького размера!</b>");
                                    file.value = null;
                                }
                                else {
                                    $("#" + previewID).html('<img class="thumb" src="' + e.target.result + '" title="' + theFile.name + '" width="160" />');
                                }
                            };
                        };
                    })(file);
                    reader.readAsDataURL(file);
                }
                else {
                    $("#" + previewID).html("<b>Выбранный файл должен быть размером не более 4 МБ!</b>");
                    file.value = null;
                }
            }
            else {
                $("#" + previewID).html("<b>Выбранный вами файл не является изображением и не будет загружен! Выберите другой файл.</b>");
                file.value = null;
            }
        }
    }
    Ответ написан
    Комментировать