cari

Rumah >hujung hadapan web >tutorial js >Pemapar Imej Mudah dalam JavaScript

Pemapar Imej Mudah dalam JavaScript

DDD
DDDasal
2024-10-25 03:22:02439semak imbas

Simple Image Viewer in JavaScript

Ini adalah pemapar imej yang sangat mudah yang dijalankan dalam penyemak imbas web. Ia menggunakan satu fail .html dan 36 baris kod. Simpan kod sebagai index.html - mengklik pada fail ini akan membuka tetingkap dalam pelayar anda yang membolehkan anda memilih imej daripada pc anda untuk dipaparkan. Saya telah dapat membuka imej 1024 x 1024 - bagus.

Ini kodnya:

<!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 - Oktober 2024

Atas ialah kandungan terperinci Pemapar Imej Mudah dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html this display
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Soalan Temuduga Teknikal - Skrip Taip BahagianArtikel seterusnya：Soalan Temuduga Teknikal - Skrip Taip Bahagian

Artikel berkaitan

Lihat lagi