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

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；

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="EdieLei" />
<title></title>
<link rel="stylesheet" type="text/css" href="zoom/viewer.css"/>
<link rel="stylesheet" type="text/css" href="zoom/main.css"/>
<body>
<h3>HTML5 图片上传预览</h3>
<div class="docs-pictures clearfix">
<img id="pic" src="" style=" 200px;height: 200px;"/>
</div>
<input id="img" type="file" accept="image/*" />
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="zoom/viewer.js" type="text/javascript" charset="utf-8"></script>
<script src="zoom/main.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#img').change(function() {
var file = this.files[0]; //选择上传的文件
var r = new FileReader();
r.readAsDataURL(file); //Base64
$(r).load(function() {
$('#pic').attr('src',this.result);
});
});
});
</script>
</head>
</body>
</html>