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

多情只被无情恼 2024-11-10 21:13:33 原文

关闭

qq_31540195的博客

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

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

标签： html 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；

<!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="width: 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>

上传前：

上传后：

放大后：

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

大致改的位置在533行：

image = {
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
aspectRatio: aspectRatio,
ratio: width / naturalWidth,
width: width*1.5,
height: height*1.5,
left: (viewerWidth - width*1.5) / 2,
top: (viewerHeight - height*1.5) / 2
};

顶: 0

踩: 0

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

相关文章推荐

查看评论

暂无评论

发表评论

用户名：
qq_40222212

评论内容：

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

个人资料

访问：9687次
积分：230
等级：
排名：千里之外

原创：14篇
转载：0篇
译文：0篇
评论：0条

文章搜索

文章分类

文章存档

展开

阅读排行

评论排行

推荐文章

: 公司简介|招贤纳士|广告服务|联系方式|版权声明|法律顾问|问题报告|合作伙伴|论坛反馈; 网站客服杂志客服微博客服 webmaster@csdn.net400-660-0108|北京创新乐知信息技术有限公司版权所有|江苏知之为计算机有限公司|江苏乐知网络技术有限公司; 京 ICP 证 09002463 号|Copyright © 1999-2017, CSDN.NET, All Rights Reserved

html图片上传阅览并且点击放大的更多相关文章

vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
H5实现多图片预览上传，可点击可拖拽控件介绍
版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...
HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
.NET MVC实现多图片上传并附带参数（ajaxfileupload）
做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ...
.NET WebAPI 实现图片上传（包括附带参数上传图片）
博主的项目,客户端是APP,考虑到以后也可能会应用到微信端.网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题. 先来看看后台方法( ...
百度UEditor在线编辑器的配置和图片上传
前言最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置一.下载UEdit ...
ASP.Net MVC3 图片上传详解（form.js,bootstrap）
图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...
Nodejs之MEAN栈开发（四）---- form验证及图片上传
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...
分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

随机推荐

富文本编辑器 CKeditor 配置使用（带附件）
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
【笔记】Python基础一：变量，控制结构，运算符及数据类型之数字，字符串，列表，元组，字典
一,开发语言介绍高级语言:Java,C#,Python ==>产生字节码低级语言:C,汇编 ==>产生机器码高级语言开发效率高,低级语言运行效率 ...
linux搭建
1.安装rpm包 [root@lixiaojie lixiaojie]# rpm -ivh openfire-3.9.3-1.i386.rpm Preparing... ############### ...
使用rke快速安装K8s集群
操作系统 centos 7.5 yum update -y yum install docker -y 关闭防火墙.selinux 下载rke helm https://github.com/helm ...
cross compile gdbserver
1. 下载gdb源码,7.12版本,下载地址:ftp://ftp.gnu.org/gnu/gdb.2. 编译gdb:0> cd gdb-7.121> mkdir __install2> ...
从零开始学spring cloud(八) -------- Eureka 高可用机制
一.Eureka高可用机制介绍 Eureka服务器没有后端存储,但注册表中的服务实例都必须发送心跳以使其注册保持最新(因此可以在内存中完成). 客户端还有一个Eureka注册的内存缓存(因此,他们不必 ...
lvm的备份还原及修改UUID
今天在VMware® Workstation 12 Pro虚拟机上克隆了一台Linux虚拟机,无意中发现两台虚拟机blkid一模一样. [root@stau64 ~]# blkid [root@sta ...
移值UCOS2到M4核与M3核的区别
之前移值过ucos2到stm32f2系列的单片机,这个单片机是属于arm的m3内核的.最近在学习永磁同步电机的控制,对于这个电机的控制,有比较多的数学计算,甚至于还有浮点的运算.所以用到了stm32f ...
服务监控-zabbix监控指标
1.cpu unitzation 监控cpu的整体状态. 使用Zabbix查看CPU利用率,会有下面几个值: CPU idle time:空闲的cpu时间比[简称id] CPU user time:用 ...
Similarity measure
1. https://blog.csdn.net/m0_37676632/article/details/68936157 2. https://www.cnblogs.com/pinard/p/62 ...