js上传图片获取尺寸

❶ js获取图片原始宽高的实现代码

如果我们页面看到的图片都是缩略图，那就需要做个图片点击放大效果，那么怎样获取图片的原始宽高呢？方法如下：
//获取图片原始宽度
function
getNaturalWidthAndHeight(img)
{
var
image
=
new
Image();
image.src
=
img.src;
return
[image.width,image.height];
}
//点击缩略图弹出层，显示原始图片。
//获取class为tz_main_box下的所有p标签下的图片img
$(".tz_main_box
p>img").each(function
(k,
v)
{
$(this).unbind("click");
//解除绑定，防止弹出多次图片层。
$(this).click(function
()
{
var
img
=
v;
//图片对象
var
imgArea
=
getNaturalWidthAndHeight(img);
var
layerWidth
=
imgArea[0]+
5;
if
(layerWidth
>
1080)
{
layerWidth
=
1080;
}
var
layerHeight
=
imgArea[1]
+
5;
if
(layerHeight
>
600)
{
layerHeight
=
600;
}
//layer弹出层插件
layer.open({
type:
1,
title:
false,
closeBtn:
0,
area:
[''+layerWidth+'px',
''
+
layerHeight
+
'px'],
skin:
'layui-layer-nobg',
//没有背景色
shadeClose:
true,
closeBtn:
1,
//显示关闭按钮
content:
"<center><img
src='"
+
$(this).attr("src")
+
"'></center>"
});
});
});
以上这篇Js获取图片原始宽高的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

❷ js如何获取图片显示时的大小尺寸

给img添加加载事件，图像加载完成才能获取图片的尺寸。
html中添加回onload
function showSize(img){
alert(img.width);
alert(img.height);
}
<div style="width:100px;height:600px"><img src="1.jpg" onload="showSize(this)"></div>
或者答js代码中添加onload
let img=document.querySelector("div img");
img.onload = function() {
alert(img.height);
alert(img.width);
}

❸ js 获取图片尺寸

img有onload属性，在图片加载完成时执行，这时候图片实际高度宽度可读取，从而实现自动获取宽高。

<imgid="img"src="1.jpg"onload="fn()"/>
<script>
varfn=function(){
//你的代码
}
</script>

❹ js获取上传图片的尺寸

你是怎么取得Image对象的宽度和高度的？用的image.style.width和image.style.height??
这两个只能获得显示在元素style属性中设置版的css样式。

用image对象是没错权的，
var image = new Image();
image.src = 你的图片路径;
document.body.appendChild(image);
image.onload = function(){
console.log(image.offsetWidth);

image.style.display = 'none';

}

这样可以获得图片的高度。记住一定得把图片加到页面上去，你可以取得高度之后马上隐藏他。

❺ js 如何获取上传文件的大小

HTML中input标签有个类型是file。这个是可以上传文件使用的。你可以直版接操作这个标签的size来获取文件的大小。
可通过下面的权方式
html代码：

js代码：
varfileId="uploadtest";
vardom=document.getElementById(fileId);
varfileSize=dom.files[0].size;//文件的大小，单位为字节B

❻ js能不能获取图片的大小

当然可以，假设网页上有这样一个图片

<imgid="myimg"src="1.jpg">

使用如下 JS 代码获取图片宽高

varmyimg=document.getElementById('myimg');
console.log(myimg.width+''+myimg.height);

但是如果图用CSS设置过尺寸，比如图片原尺寸是 256px * 256px，然后用 CSS 设置为 64px * 64px 上面的代码获得的尺寸就是 64px * 64px 。如果想获得图片原尺寸的话，可以使用如下代码

varmyimg=document.getElementById('myimg');
varnewimg=document.createElement('img');
newimg.src=myimg.src;
console.log(newimg.width+''+newimg.height);//这里就是图片原始宽高了。