html图片上传阅览并且点击放大

 

•  
•  
•  
   
•  
• 
•  

关闭

 

qq_31540195的博客

 

 

 

• 目录视图
• 摘要视图
• 订阅

异步赠书：9月重磅新书升级，本本经典           程序员9月书讯      每周荐书：ES6、虚拟现实、物联网（评论送书）

html图片上传阅览并且点击放大

标签： htmlhtml图片上传预览电机房啊图片

2016-08-12 10:02 661人阅读 评论(0) 收藏 举报

 分类：

html学习（1） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

在做项目的时候用到了图片上传，用的是网上找到的一个bootstrap模板，里面的有比较好的图片上传预览功能，但是无法点击放大图片，感觉这样用户体验不怎么好，所以就想自己加一个点击放大图片的功能上去；用到了一个GitHub的开源项目Viewer.js；地址：https://github.com/fengyuanchen/viewer；

但是在开发的时候发现对于原本就已经加载的图片是可以放大的，但是对于自己上传的图片放大不了，猜想了一下可能是因为bootstrap模板是在js里面用代码添加了一个img来显示上传的图片，而Viewer.js无法找到这个img，所以点击之后放大不了。因为刚开始接触这方面，所以源码也没怎么看懂，不知道这个猜想对不对；

其实对于项目而言，上传的图片不能点击放大是没有什么影响的，一般我们不需要放大本地有的图片，但是对于这么一个功能我还是很想去做一下实现一下的，所以就在空闲之余网上各种找方法拼凑一下整合一下做出来；

首先准备工作室要下载jquery和Viewer；

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="author" content="EdieLei" />
6. <title></title>
7. <link rel="stylesheet" type="text/css" href="zoom/viewer.css"/>
8. <link rel="stylesheet" type="text/css" href="zoom/main.css"/>
9. <body>
10. <h3>HTML5 图片上传预览</h3>
11. <div class="docs-pictures clearfix">
12. <img id="pic" src="" style="width: 200px;height: 200px;"/>
13. </div>
14. <input id="img" type="file" accept="image/*" />
15. <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
16. <script src="zoom/viewer.js" type="text/javascript" charset="utf-8"></script>
17. <script src="zoom/main.js" type="text/javascript" charset="utf-8"></script>
18. <script type="text/javascript">
19. $(function() {
20. $('#img').change(function() {
21. var file = this.files[0]; //选择上传的文件
22. var r = new FileReader();
23. r.readAsDataURL(file); //Base64
24. $(r).load(function() {
25. $('#pic').attr('src',this.result);
26. });
27. });
28. });
29. </script>
30. </head>
31. </body>
32. </html>

上传前：

上传后：

放大后：

这里感觉放大效果不明显，这是因为原图就这么大，可以手动点击底部按钮进行图片的调整，而实际中我们在网页上经常显示的是图片的缩略图，当点击之后显示原图就已经是放大了；如果需要点击之后得到的图比原图要大的话那就要改Viewer.js里面的属性了，

大致改的位置在533行：

1. image = {
2. naturalWidth: naturalWidth,
3. naturalHeight: naturalHeight,
4. aspectRatio: aspectRatio,
5. ratio: width / naturalWidth,
6. width: width*1.5,
7. height: height*1.5,
8. left: (viewerWidth - width*1.5) / 2,
9. top: (viewerHeight - height*1.5) / 2
10. };

 

顶

0

踩

0

• 上一篇android开发设置应用开机自启动（2）——并使应用实时保持在前台
• 下一篇HTML学习笔记

 

  相关文章推荐

• • html图片上传阅览并且点击放大
• • Python全栈工程师特训班--韦玮
• • javaEE：day8-在线图片上传与浏览（带图片点击放大、下载、删除、目录打散）
• • Blink在阿里集团的应用实践--陈守元
• • 点击图片上传文件
• • Vue2.x知识点面面通
• • html图片上传和显示
• • 大型Web构架设计案例解析

• • html5多图片上传预览效果
• • 机器学习案例实战--欺诈检测
• • html5图片上传
• • Android开发实战30分钟集成第三方SDK
• • jquery+html5图片上传可裁剪
• • html5多图片上传
• • HTML5图片上传
• • HTML5移动端裁剪图片上传头像代码

 

查看评论

  暂无评论

 

 

发表评论

• 用 户 名：
• qq_40222212

• 评论内容：
• 

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场

 

 

 

 

个人资料

灵犀一指

 

 

• 访问：9687次
• 积分：230
• 等级： 
• 排名：千里之外
• 原创：14篇
• 转载：0篇
• 译文：0篇
• 评论：0条

文章搜索

文章分类

• android组件属性(0)
• android验证功能(0)
• boostrap插件(1)
• android笔记(7)
• html学习(2)
• SSM框架学习笔记(1)
• android studio(0)
• android studio笔记(2)
• android SuperExample开发(0)

文章存档

• 2017年09月(1)
• 2017年06月(1)
• 2017年03月(4)
• 2016年10月(1)
• 2016年09月(1)

展开

阅读排行

• bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色(6962)
• android当activity加载完成后自动弹出popWindow(896)
• html图片上传阅览并且点击放大(661)
• struts2 2.5.2web.xml和struts.xmll配置(237)
• android开发设置应用开机自启动（2）——并使应用实时保持在前台(138)
• android使用TextView实现文字的跑马灯效果(122)
• android开发设置应用开机自启动(108)
• RecyclerView中绘制不相同的分割线(105)
• HTML学习笔记(88)
• 自定义图片手势缩放ImageView笔记(86)

评论排行

• android 滚动播报效果的实现(0)
• RecyclerView中绘制不相同的分割线(0)
• android studio引入module时出现的若干问题(0)
• android使用TextView实现文字的跑马灯效果(0)
• struts2 2.5.2web.xml和struts.xmll配置(0)
• HTML学习笔记(0)
• html图片上传阅览并且点击放大(0)
• android开发设置应用开机自启动（2）——并使应用实时保持在前台(0)
• android开发设置应用开机自启动(0)
• android当activity加载完成后自动弹出popWindow(0)

推荐文章

• * CSDN新版博客feed流内测用户征集令
• * Android检查更新下载安装
• * 动手打造史上最简单的 Recycleview 侧滑菜单
• * TCP网络通讯如何解决分包粘包问题
• * SDCC 2017之大数据技术实战线上峰会
• * 快速集成一个视频直播功能

 

 

 

 

公司简介|招贤纳士|广告服务|联系方式|版权声明|法律顾问|问题报告|合作伙伴|论坛反馈

网站客服杂志客服微博客服webmaster@csdn.net400-660-0108|北京创新乐知信息技术有限公司 版权所有|江苏知之为计算机有限公司|江苏乐知网络技术有限公司

京 ICP 证 09002463 号|Copyright © 1999-2017, CSDN.NET, All Rights Reserved