search

Home >Web Front-end >JS Tutorial >Simple Image Viewer in JavaScript

Simple Image Viewer in JavaScript

DDD
DDDOriginal
2024-10-25 03:22:02378browse

Simple Image Viewer in JavaScript

This is a very simple image viewer that runs in the web browser. It uses a single .html file and 36 lines of code. Save the code as index.html - clicking on this file will open a window in your browser allowing you to choose an image from your pc to display. I've been able to open a 1024 x 1024 image - nice.

Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Image Viewer</title>
    <style>
        body {
            background-color: #f0f0f0;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        img {
            max-width: 100%;
            height: auto;
            border: 2px solid #000;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Simple Image Viewer</h1>
    <input type="file" id="fileInput" accept="image/*">
    <img id="imageViewer" src="#" alt="Your image will appear here.">
    <script>
        const fileInput = document.getElementById('fileInput');
        const imageViewer = document.getElementById('imageViewer');

        fileInput.addEventListener('change', function() {
            const file = this.files[0];
            const url = URL.createObjectURL(file);
            imageViewer.src = url;
        });
    </script>
</body>
</html>

Ben Santora - October 2024

The above is the detailed content of Simple Image Viewer in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html this display
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Technical Interview Questions - Part TypescriptNext article：Technical Interview Questions - Part Typescript

Related articles

See more