原生js获取图片的base值--无图片验证

最新推荐文章于 2023-12-07 15:33:15 发布

原创最新推荐文章于 2023-12-07 15:33:15 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

小白分享专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript处理文件输入的方法。通过input元素选择文件后，利用FileReader API读取文件并将其转换为Data URL，最终在控制台输出文件的Base64编码值。

    <input type="file" name="" id="">

    <script>
        var files = document.querySelector("input");
        // input[type ]  中的文件 在files对象中的files类数组中
        // 可用fr.readAsDateUrl来读取文件
        // fr.onload 完成后可获取文件的base64值
        files.onchange=function(){
            console.log(this.files);
            var fr = new FileReader();
            fr.readAsDataURL(this.files[0]);
            // onload事件
            // 
            fr.onload=function(){
                alert(this.result)
            }
        }

    </script>