FileReader 获取图片BASE64 代码 并预览
来源:互联网 发布:小米4s网络制式参数 编辑:程序博客网 时间:2024/05/14 23:47
FileReader 获取图片的base64 代码 并预览
FileReader ,老实说我也不怎么熟悉。在这里只是记录使用方法。
FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态
文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。
demo
<!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>
正文到此结束,谢谢观看 ,如果觉得有用的话,点个赞可好!
阅读全文
0 0
- FileReader 获取图片BASE64 代码 并预览
- html5的FileReader实现图片上传预览并生成base64
- HTML5 FileReader base64图片预览
- FileReader本地预览图片
- FileReader 实现预览图片
- FileReader -- 图片预览问题
- FileReader图片预览上传
- FileReader上传图片预览
- 图片上传 预览 及 获取base64
- 利用FileReader和FormData实现图片预览和上传(base64转二进制文件)
- 利用FileReader实现图片预览
- 使用 html5 FileReader 获取图片, 并异步上传到服务器
- 获取网络图片并转为base64编码
- 上传图片并预览-原生js代码
- JS FileReader 图片的本地预览
- PHP将图片转base64编码以及base64图片转换为图片并保存代码
- 网络图片获取并转换为Base64字符串
- 无损获取网络图片并转换成base64编码
- 关于VS2015调试DX11的HLSL着色器代码的方法与步骤
- 用redis实现支持优先级的消息队列
- pyspark- ml-features
- Java多线程(一)
- 九型人格的智慧-第三章(本性和人格)
- FileReader 获取图片BASE64 代码 并预览
- stl中的adjacent_difference
- 搭建spark
- 3
- 判断上三角矩阵
- sdnu1023聪明的收银员
- Angular两种模态框弹出方式
- 如何在三年内快速成长为一名技术专家
- [转]Eclipse进行可视化的GUI开发3大GUI插件