JS - 写一个简单的静态页面支持上传文件并转Base64编码

最新推荐文章于 2023-07-22 08:00:00 发布

Zong_0915

最新推荐文章于 2023-07-22 08:00:00 发布

阅读量829

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Zong_0915/article/details/130880862

版权

JS - 写一个简单的静态页面支持上传文件并转Base64编码

前言
静态页面代码

前言

我后端有一个上传文件并判断其文件类型的功能，我希望拿不同的文件流进行测试，但是文件的请求体又得获得。拿来作为参数传递。因此写了个静态文件去获取。

静态页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Upload File</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Upload（等待几秒）</button>
    <br>
    <textarea id="base64Output" rows="100" cols="100"></textarea>
    <script>
        function uploadFile() {
            var fileInput = document.getElementById('fileInput');
            var file = fileInput.files[0];
            var reader = new FileReader();
            reader.onload = function() {
                var bytes = new Uint8Array(reader.result);
                var base64Str = arrayBufferToBase64(bytes.buffer);
				document.getElementById('base64Output').value = base64Str
            };
            reader.readAsArrayBuffer(file);
        }

        function arrayBufferToBase64(buffer) {
            var binary = '';
            var bytes = new Uint8Array(buffer);
            for (var i = 0; i < bytes.byteLength; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            return btoa(binary);
        }
    </script>
</body>
</html>