获取图片base64的方法

最新推荐文章于 2024-05-31 09:05:13 发布

weixin_30505751

最新推荐文章于 2024-05-31 09:05:13 发布

阅读量465

点赞数

文章标签： shell javascript ViewUI

原文链接：http://www.cnblogs.com/JeneryYang/p/8953775.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
<input type="file" class="file" name="imgfile" id="imgfile" placeholder="请选择文件">
<img src="" id="showImg" >

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var input = document.getElementById("imgfile");
//检测浏览器是否支持FileReader
 if (typeof (FileReader) === 'undefined') {
     result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
     input.setAttribute('disabled', 'disabled');
 } else {
 //开启监听
     input.addEventListener('change', readFile, false);
 }
function readFile() {
    var file = this.files[0];

     //限定上传文件的类型，判断是否是图片类型
     if (!/image\/\w+/.test(file.type)) {
         alert("只能选择图片");
         return false;
    }
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function (e) {
       base64Code=this.result;
        //把得到的base64赋值到img标签显示
       $("#showImg").attr("src",base64Code);
     }
  }
</script>


</body>
</html>

转载于:https://www.cnblogs.com/JeneryYang/p/8953775.html

weixin_30505751

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取图片base64的方法

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link re...
复制链接

扫一扫