<form id="imgForm"> <input type="file" class="addBorder" onchange="loadImg()"> <br/> <button type="button" onclick="loadImg()">获取图片</button> </form> <div class="addBorder" id="imgDiv"> <img id="imgContent"> </div>
function loadImg(){ //获取文件 var file = $("#imgForm").find("input")[0].files[0]; //创建读取文件的对象 var reader = new FileReader(); //创建文件读取相关的变量 var imgFile; //为文件读取成功设置事件 reader.onload=function(e) { alert(‘文件读取完成‘); imgFile = e.target.result; console.log(imgFile); $("#imgContent").attr(‘src‘, imgFile); }; //正式读取文件 reader.readAsDataURL(file); }
.addBorder{ border:1px solid #ccc; } #imgDiv{ width:100px; height:100px; } #imgContent{ width: 100%; height:100%; }
https://blog.csdn.net/fd214333890/article/details/71250488 转载自这里
原文:https://www.cnblogs.com/qianyuhebaobao/p/11223758.html