Jquery 上传图片预览，等比例缩放

最新推荐文章于 2021-06-09 16:51:09 发布
最新推荐文章于 2021-06-09 16:51:09 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 网站技术文章 文章标签： jquery function xhtml javascript file html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongbosong/article/details/5686029
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
 $("#img1").css("display","none");
 $("#img2").css("display","none");
    $("#f1").change(function(){
     $("#img1").css("display","");
        $("#img1").attr("src","file:///"+$("#f1").val());
        $("#img2").attr("src","file:///"+$("#f1").val());
        fixImage(200,180);
    })   
});

function fixImage(maxWidth,maxHeight)
{
 var imgWidth = $("#img2").width();
 var imgHeight = $("#img2").height(); 
 var imgWH = imgWidth/imgHeight;
 var maxWH = maxWidth/maxHeight;
 if(imgWidth >= imgHeight)
 {
  if(imgWH <= maxWH)
  {
   var mw = (imgWidth * maxHeight)/imgHeight;
   alert(mw);
   $("#img1").width(mw);
   $("#img1").height(maxHeight);
  }
  else
  {
   var mh = (imgHeight * maxWidth)/imgWidth;
   $("#img1").width(maxWidth);
   $("#img1").height(mh);
  }
 }
 else
 {
  if(imgWH >= maxWH)
  {
   var mh = (imgHeight*maxWidth)/imgWidth;
   $("#img1").width(maxWidth);
   $("#img1").height(mh);

  }
  else
  {
   var mw = (imgWidth * maxHeight)/imgHeight;
   $("#img1").width(mw);
   $("#img1").height(maxHeight);
  }
 }
}

</script>

</head>

<body>
<table width="503px" style="height:200px;" border="1px" cellpadding="0" cellspacing="0">
 <tr>
  <td>
   <input id="f1" name="f1" type="file" /><br />
  </td>
  <td style="width:302px;">
   <img id="img1" alt="" />
   <img id="img2" alt="" />
  </td>
 </tr>
</table>
</body>

</html>

 

yongbosong
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery插件：图片上传按比例预览
03-20
NULL 博文链接：https://wangrl.iteye.com/blog/800513
js实现图片上传并按比例缩放后预览
05-26
mvc框架下，用js控制，实现上传图片并按比例缩放后预览。经测试，在ie6、ie7、ie8、傲游浏览器上都可以使用,全用jsp标签也没问题。
加载到图片之后，对图片进行等比例填充缩放 分类： 图片等比缩放 ...
weixin_30551947的博客
04-22 316
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m...
######选择本地图片预览时。等比例缩放图片。【查了各种js不行。最后想到换种方式，用css! ok！】
全力以赴烂口发_青春饭耗不起
05-25 203
######选择本地图片预览时。等比例缩放图片。【查了各种js不行。最后想到换种方式，用css! ok！】找到：https://blog.csdn.net/forrest_chen/article/details/52210093=======yes!=====我的实现：【项目中用到的，上传图片素材，要实现：保持图片等比例 缩放预览。】找了3个多小时！！！换种思路：ok &lt;div styl...
基于Jquery的图片预览插件
11-18
在Web开发中，图片预览是一个常见的需求，尤其是在用户上传图片或浏览相册时。Jquery作为一个轻量级、高性能的JavaScript库，提供了丰富的API和便利的插件机制，使得实现图片预览功能变得简单。本篇文章将深入探讨...
jquery 图片上传按比例预览插件集合
12-01
该插件由 IDDQD 创建，允许用户在上传图片时生成固定宽高范围内的等比例缩放图。以下是一段关键的JavaScript代码： ```javascript (function($) { jQuery.fn.extend({ uploadPreview: function(opts) { // ... ...
jQuery上传图片压缩预览效果代码
10-24
- 图片尺寸限制：通过修改`drawImage()`的参数，可以调整绘制到Canvas上的图片尺寸，从而实现按比例缩放。 - 压缩质量控制：`toDataURL()`的第二个参数可以设置JPEG或PNG的压缩质量，数值越小，文件越小，但画质也越...
jQuery图片缩放平移预览代码.zip
11-22
在图片预览功能中，CSS可能包含了设置图片容器的样式、过渡效果和响应式布局等内容，以确保在不同屏幕尺寸下都能正确显示。 3. **JavaScript**：JavaScript是实现动态功能的核心语言，负责处理用户的交互和图片的...
jquery点击图片放大与缩小
yuanyuan
05-03 764
在web项目中图片的放大与缩小，比如：列表里显示的图片，相册图片等 引用以下文件1、<script src="js/jquery-1.11.3.min.js"></script> 2、<script src="js/bootstrap.min.js"></script> 2、<script src="js/bootstrap-transition.js"></script> 3、<link href
jquery 图片放大预览
11-20
采用jquery将图片放大预览，点击图片放大，可自由切换查看
基于JQuery的图片放大缩小，拖动
02-15
基于JQuery的图片放大缩小功能，以及拖动等相关功能。
jquery图片比例缩放插件
04-06
NULL 博文链接：https://axl234.iteye.com/blog/1551989
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
10-15
主要介绍了jQuery+css实现的点击图片放大缩小预览功能,结合实例形式分析了jQuery+css控制图片放大、缩小预览查看的相关操作技巧,需要的朋友可以参考下
jquey 压缩图片上传
yuhuamei的博客
06-09 404
jquery代码 function uploadPic(e) { var file = e.files[0]; this.compress(file, callback); function callback(data){//回调获取压缩后的Blog if(data){ console.log("压缩成功")； // 将blob转为file var
jQuery + ashx 实现图片按比例预览、异步上传及显示
GIS 随笔
09-09 7141
关键点： jquery.ajax 方法 和 HTML5 中的 FileReader对象ashx 处理程序asp.net  的 ScriptManager.RegisterStartupScript 调用客户端js脚本 一、ASP.NET 前台源码：
jquery使图片简单放大效果【上传图片或者查看从数据库中读出来的imgPath】
Thinking
02-13 623
jquery使图片放大 关键点： ①获取小图片左上角的绝对位置//var X = $('#img1').position().left;//横坐标//var Y=$('#img1').offset().top;//纵坐标 ②div+js+css控制 效果图： 放大的图片可以随着小图片位置的移动相应的移动 jsp页面： <% String path = req
js,jq实现上传图片时,显示图片，自动调整图片宽高
qq_42394457的博客
06-17 1118
//add-user-headImg 是 input ,使用change监听 $("#add-user-headImg").change(function(){ //检测用户的浏览器是否支持FileReader if(typeof FileReader==='undefined'){ alert("您的浏览器暂不支持上传图...
jQuery实现图片的等比例缩放
最新发布
05-30
您可以使用jQuery的`width()`和`height()`方法来获取图片的宽度和高度，然后通过比较它们的比例来确定缩放比例，最后使用jQuery的`css()`方法来设置图片的宽度和高度。 以下是一个简单的示例代码： ```html <img src="example.jpg" id="my-image"> ``` ```javascript $(document).ready(function() { var imgWidth = $('#my-image').width(); var imgHeight = $('#my-image').height(); var imgRatio = imgWidth / imgHeight; var containerWidth = $('#my-image').parent().width(); var containerHeight = $('#my-image').parent().height(); var containerRatio = containerWidth / containerHeight; if (imgRatio > containerRatio) { $('#my-image').css('width', containerWidth); $('#my-image').css('height', 'auto'); } else { $('#my-image').css('height', containerHeight); $('#my-image').css('width', 'auto'); } }); ``` 在这个例子中，我们首先获取图片的宽度和高度，然后获取包含图片的容器的宽度和高度。通过比较图片的比例和容器的比例，我们确定缩放比例，并使用`css()`方法设置图片的宽度和高度，保证图片等比例缩放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值