Как предварительно просмотреть изображение перед его загрузкой с помощью jQuery

Вы можете использовать метод JavaScript readAsDataURL() объекта FileReader для чтения содержимого указанного файла. Когда операция чтения завершена, состояние readyState становится ГОТОВО, и запускается загрузочный модуль. Свойство результата FileReader result возвращает содержимое файла.

Давайте попробуем следующий пример, который демонстрирует, как прочитать файл изображения с помощью этого метода и предварительно просмотреть его в браузере, прежде чем он будет загружен на сервер.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Preview an Image Before it is Uploaded</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function previewFile(input){
        var file = $("input[type=file]").get(0).files[0];
 
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#previewImg").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }
    }
</script>
</head> 
<body>
    <form action="confirmation.php" method="post">
        <p>
            <input type="file" name="photo" onchange="previewFile(this);" required>
        </p>
        <img id="previewImg" src="/examples/images/transparent.png" alt="Placeholder">
        <p>
            <input type="submit" value="Submit">
        </p>
    </form>
</body>
</html>

Мы использовали прозрачное изображение размером 1×1 пиксель в качестве заполнителя для изображения предварительного просмотра. Это сделано для того, чтобы браузер не отображал заполнитель изображения по умолчанию для несуществующего изображения.

Читайте также

Похожие примеры: