Вы можете использовать метод 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 пиксель в качестве заполнителя для изображения предварительного просмотра. Это сделано для того, чтобы браузер не отображал заполнитель изображения по умолчанию для несуществующего изображения.

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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.