多种方式实现js图片预览

原创 2016-12-26 15:09:15 526
摘要:这篇文章主要为大家详细介绍了多种方式实现js图片预览,具有一定的参考价值。<!doctype html> <html lang="en">  <head>  <meta charset="UTF-8">  <meta name=&quo

这篇文章主要为大家详细介绍了多种方式实现js图片预览,具有一定的参考价值。

<!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>


发布手记

热门词条