FileReader 获取图片BASE64 代码 并预览

FileReader 获取图片的base64 代码 并预览

FileReader ,老实说我也不怎么熟悉。在这里只是记录使用方法。

方法名参数描述
abort none 中断读取
readAsBinaryString file(blob) 将文档读取为二进制码
readAsDataURL file(blob) 将文档读取为 DataURL
readAsText file, (blob) 将文档读取为文本

FileReader 包含了一套完整的事件模型,用于捕获读取文档时的状态

事件描述
onabort 中断时触发
onerror 出错时触发
onload 文档读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

文档一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的进程都会在成功读取文档的时候,抓取这个值。

 

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></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>

关键词:gt lt 读取 filereader 文档 file base 图片 触发 script

相关推荐:

FileReader初步使用实现上传图片预览效果

JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

本地图片上传预览

FileReader 获取图片base64数据流 并 生成图片

使用readAsDataURL方法预览图片

图片转base64上传

html5 把 file文档转成base64字符,base64字符转成blob对象案例(适用于多种类型文档)

js通过fileReader获取图片的base64格式(pc端和手机端都可以,但是要先在页面中创建dom)

利用FileReader实现上传图片前本地预览

将图片转换为Base64编码的字符串