多种方式实现js图片预览
作者:独行侠梦 时间:2024-04-23 09:24:44
先贴代码,之后完善:
<!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>
标签:js,图片预览
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Access数据库安全问答
2007-08-23 15:28:00
自动化Nginx服务器的反向代理的配置方法
2022-08-07 04:02:07
![](https://img.aspxhome.com/file/2023/9/128179_0s.png)
go开源项目用户名密码验证的逻辑鬼才写法
2024-05-08 10:44:20
![](https://img.aspxhome.com/file/2023/1/127401_0s.png)
MySQL的时间差函数TIMESTAMPDIFF、DATEDIFF的用法
2024-01-25 04:39:33
对python pandas读取剪贴板内容的方法详解
2023-07-11 09:15:45
mysql事务隔离级别详情
2024-01-17 13:56:23
![](https://img.aspxhome.com/file/2023/0/117840_0s.png)
python实现生成Word、docx文件的方法分析
2021-03-01 07:49:53
python如何求解两数的最大公约数
2021-01-16 07:38:18
go中import包的大坑解决方案
2024-05-09 09:55:14
![](https://img.aspxhome.com/file/2023/0/127050_0s.png)
Web Jmeter–接口测试工具详解
2022-06-27 04:24:32
![](https://img.aspxhome.com/file/2023/7/131967_0s.png)
一起来看看python的装饰器代码
2023-08-07 19:33:20
asp fso操作类
2011-03-07 10:57:00
带你轻松了解 SQL Server数据库的组成
2009-02-05 15:53:00
一文教会你用python连接并简单操作SQLserver数据库
2024-01-17 14:11:34
![](https://img.aspxhome.com/file/2023/1/124981_0s.jpg)
鼠标经过超链时的提示图层源码
2010-03-17 20:51:00
Python学习小技巧之列表项的排序
2022-03-31 12:06:12
oracle 存储过程加密的方法
2024-01-13 12:49:10
DedeCMS 5.7 sp1远程文件包含漏洞(CVE-2015-4553)
2022-05-31 17:37:05
![](https://img.aspxhome.com/file/2023/2/109522_0s.jpg)
Python async模块使用方法杂谈
2023-12-12 14:46:36
![](https://img.aspxhome.com/file/2023/3/121873_0s.png)
Go语言单链表实现方法
2024-02-14 15:46:45