网络编程
位置：首页>> 网络编程>> JavaScript>> 多种方式实现js图片预览

多种方式实现js图片预览

作者：独行侠梦　　发布时间：2024-04-23 09:24:44　

标签：js,图片预览

先贴代码，之后完善：


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus&reg;">
<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>

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com