input 上传图片，获取base64

最新推荐文章于 2023-02-02 10:16:35 发布

weixin_34025151

最新推荐文章于 2023-02-02 10:16:35 发布

阅读量589

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a4d8682f265da432d2882d5

本文介绍了一个简单的HTML文件上传界面及JavaScript处理流程。通过一个文件输入元素实现多文件选择，并利用FileReader API将选中的文件转换为Base64编码格式。此方法适用于将文件内容作为字符串进行传输或预览。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file" onchange="upload(this.files)" multiple/>
</body>
<script>
    function upload(f) {
        for (var i = 0; i < f.length; i++) {
            var reader = new FileReader();
            reader.readAsDataURL(f[i]);
            reader.onload = function (e) {
                const base64Img = e.target.result
                console.log(base64Img)
            }
        }

    }
</script>

</html>

复制代码