图片转base64上传

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30633507

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jinsuo/p/9415169.html

本文介绍了一个简单的HTML页面实现图片文件选择后的实时预览功能，并将所选图片转换为Base64编码格式的方法。该页面使用了jQuery简化DOM操作，并通过FileReader API读取文件内容。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div>
     <input type="file" id="imgTest" type="file" onchange="imgChange(event)" accept=".gif,.jpg,.jpeg,.png">
    </div>
    <img src="" id="showImage" alt="">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        function imgChange(e) {
        console.log();
        console.info(e.target.files[0]);//图片文件
        var dom =$("#imgTest")[0];
        console.info(dom.value);//这个是文件的路径 C:\fakepath\icon (5).png
        console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
               console.info(this.result); //这个就是base64的数据了
                $("#showImage")[0].src=this.result;
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    }
    </script>
</body>
</html>