html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

多种方式实现js图片预览_javascript技巧_

[ ] 已经帮助:人解决问题

先贴代码,之后完善:Ci5HTML5中文学习网 - HTML5先行者学习网

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>js多种方式图片预览-持续更新</title> </head> <body> <body>  <input type="file" id="file" value="选择" accept="image/*"> <div style="width:300px;height:300px;border:1px solid #ccc"> <img id="img_show" src="" /> </div> </body> <script type="text/javascript" src="./jquery-3.1.1.min.js"></script> <script type="text/javascript"> //设置自己的变量存储区 var Util = {   file : $("#file"),   image_show:$("#img_show") } Util.file.onchange=function(f){  if(this.files[0].type.indexOf('image')<0){   alert("请选择图片文件!");   return;   }  if(this.files[0].size/1024 > 5*1024){   alert("图片过大,请选择5M以下的文件");   return;  }  if(typeof FileReader=='undefined'){//如果支持,typeOf返回的也是 Function   alert("您的浏览器不支持html5 fileReader请更换浏览器重试!");   return;  }  var reader = new FileReader();  reader.readAsDataURL(this.files[0]);//这里传的是一个blob ,其实file对象就是继承自bolob  reader.onload=function(e){   console.log(reader.result);//这里拿到的是一个base64编码后的图片   Util.image_show.src=reader.result;  } }; </script></html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。Ci5HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助