码迷,mamicode.com
首页 > 其他好文 > 详细

获取图片base64的方法

时间:2018-04-26 18:35:45      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:eof   his   href   ret   css   ===   ==   jquer   function   

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

 

获取图片base64的方法

标签:eof   his   href   ret   css   ===   ==   jquer   function   

原文地址:https://www.cnblogs.com/JeneryYang/p/8953775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!