Javascript上传图片转base64并预览

HTML：

<div><input type="file" id="myimg"onchange="imgChange(this)"accept="image/png,image/gif,image/jpeg"/><img width="300px"  src="" alt=""></div>

function imgChange(img) {// 生成一个文件读取的对象const reader = new FileReader();reader.onload = function (ev) {// base64码var imgFile =ev.target.result;//或e.target都是一样的document.querySelector("img").src= ev.target.result;}//发起异步读取文件请求，读取结果为data:url的字符串形式，reader.readAsDataURL(img.files[0]);
}

Javascript上传图片转base64并预览相关推荐

oracle如何上传图片,js实现上传图片之上传前预览图片
上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出 ...
mvc上传图片(上传和预览)webuploader
笔者看到mvc最近比较流行,而很多使用一些比较旧的的方法上传图片,再次安利一下百度的webuploader控件吧 webuploader第一步要先下载一些插件这点可以在webuploader官网上下 ...
javascript --- 文件上传即时预览闭包实现多图片即时预览
使用javascript原生功能实现,点击上传文件,然后再网页上显示出来 1. 初级显示 1.1 准备一个input标签和一个img标签 <input type=file id="fi ...
JavaScript上传图片转base64
常规方法是在 form 标签上获取,这个方法是通过事件对象拿到上传的图片的数据,在vue或者react环境里用ref拿到的真实dom元素dom会和在原生js环境里拿到的事件对象有区别,需要自行修改 & ...
Vue-PDF的Base64在线预览
第一步:导入所需要的依赖 "pdfjs-dist": "2.10.377", 第二步: 引入 : main.js中 import Vue from 'vue'; ...
ASP.NET上传图片时，产生预览
<tr bgcolor="#f5f5f5"> <td height="30" align="center" va ...
使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）
1.插件下载地址:https://mozilla.github.io/pdf.js/ 下载后解压pdfjs-1.10.88-dist.zip文件后得到: 2.把pdfjs-1.10.88-dist放到 ...
java中上传图片的原理_js实现图片上传预览原理分析
目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便.一直以来也就只是用用,没有想过这些插件背后的实现原理.趁着今天有点时间,也来学习学习. 追根溯源设想一开始,按照我 ...
JavaScript 图片的上传前预览（兼容所有浏览器）
功能描述通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点 ● 对于 Chrome.Fire ...
模仿微信朋友圈图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
模仿微信朋友圈图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...

Javascript上传图片转base64并预览

Javascript上传图片转base64并预览

Javascript上传图片转base64并预览相关推荐

最新文章

热门文章