Verificar tamanho do arquivo em um Input do tipo file em tempo real. – Blog – Devdata Sistemas

Você pode usar JavaScript para verificar o tamanho do arquivo selecionado pelo usuário antes de enviar o formulário. Aqui está um exemplo de como você pode fazer isso:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload Limit</title>
</head>
<body>
    <form action="#" id="uploadForm" enctype="multipart/form-data">
        <input type="file" id="fileInput" name="fileInput">
        <span id="fileSizeMessage"></span>
        <button type="submit">Upload</button>
    </form>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            var fileInput = event.target;
            if (fileInput.files.length > 0) {
                var fileSize = fileInput.files[0].size; // in bytes
                var maxSize = 2 * 1024 * 1024; // 2MB
                var fileSizeMessage = document.getElementById('fileSizeMessage');
                
                if (fileSize > maxSize) {
                    fileSizeMessage.textContent = 'O arquivo excede o tamanho máximo permitido de 2MB.';
                    fileSizeMessage.style.color = 'red';
                    fileInput.value = ''; // Clear the file input
                } else {
                    fileSizeMessage.textContent = 'Tamanho do arquivo: ' + formatFileSize(fileSize);
                    fileSizeMessage.style.color = 'green';
                }
            } else {
                document.getElementById('fileSizeMessage').textContent = '';
            }
        });

        // Function to format file size for display
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            var k = 1024;
            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            var i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    </script>
</body>
</html>

Neste exemplo, adicionamos um ouvinte de evento para o evento change do input de arquivo. Isso significa que a função será chamada sempre que o usuário selecionar ou alterar um arquivo. Dentro dessa função, verificamos o tamanho do arquivo e exibimos uma mensagem em tempo real sobre o tamanho do arquivo selecionado. Se o tamanho exceder o limite, uma mensagem de erro é exibida e o arquivo é desconsiderado, permitindo que o usuário selecione um arquivo dentro do limite.

Related Posts