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

一个小人儿

于 2019-09-28 21:10:12 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

分类专栏：小白分享

本文链接：https://blog.youkuaiyun.com/Ajax_A/article/details/101638936

小白分享专栏收录该内容

29 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <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>