testfile.html - master - MedicIsSpy/TESTNAME

testfile.html
73 строки3 KB
MedicIsSpy
testfile.html
18 дек 2025, 11:14
18 дек 2025, 11:143628477
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Конвертатор изображений и mp3 файлов в base64</title>
    <style>
        h1 {
            text-align: center;
            font-size: 50pt;
            background-color: bisque;
        }
        body {
            background-color: blanchedalmond;
        }
        .flrd {
            background-color: rgb(255, 197, 91);
        }
        #base64-output-local {
            box-shadow: 3px 3px 10px 10px rgb(129, 0, 0);
            font-size: large;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10pt;
        }
        img {
            box-shadow: 3px 3px 10px 10px red;
        }
    </style>
</head>
<body>
    <h1><i>Конвертатор</i></h1>
    <input class="flrd" type="file" id="fileInput" accept=".jpg, .jpeg, image/*, .mp3, audio/*">
    <p>Название выбранного файла: <span id="file-name"><b>Никакое.</b> А чего не выбрали-то?</span></p><br>
    <div class="container"><img id="output-image-local"></div><br>
    <div class= "container"><textarea id="base64-output-local" rows="30" cols="120" readonly placeholder="Текст в формате Base64 появится здесь!"></textarea></div>
    <script>
        const fileInput = document.getElementById('fileInput');
        const outputArea = document.getElementById('base64-output-local');
        const fileNameSpan = document.getElementById('file-name');
        const outputImage = document.getElementById('output-image-local');
        fileInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                fileNameSpan.textContent = file.name;
                if (!file.type.startsWith('image/') && !file.type.startsWith('audio/')) {
                    outputArea.value = "Внимание! Выбранный файл НЕ изображение и НЕ аудио (mp3).";
                    outputImage.src = "";
                    return;
                }
                const reader = new FileReader();
                reader.onload = function(e) {
                    const base64String = e.target.result;
                    outputArea.value = base64String;
                     if (file.type.startsWith('image/')) {
                        outputImage.src = base64String;
                    } else {
                        outputImage.src = ""; // Clear image if it was an mp3
                        outputArea.value += "\n\n--- (Это звук, какое изображение вы ожидали?) ---";
                    }
                };
                reader.readAsDataURL(file);
            } else {
                outputArea.value = "Файла нет.";
                fileNameSpan.textContent = "Может, выбрать чего?";
                outputImage.src = "";
            }
        });
    </script>
</body>
</html>