Javascript 如何显示用户上传的图像的原始大小？

我通过从头开始创建个人项目来学习web开发。基本上我想设计一个类似于9GAG（一个用户生成的内容网站）的网站。 我在显示上传图像的过程中被卡住了。将显示图像，但它会根据div元素的尺寸进行调整。我希望相反：div适应图像的原始尺寸。 我读到应该编写一些PHP来获取图像维度（getImageSize（）），然后编写JavaScript来根据PHP函数的结果更改div的宽度和高度。 我真的不知道这两个人会如何相互影响

那么，你有什么适合我需要的建议或解决方案吗

谢谢,，

---

Marco

一般来说，这是一个非常糟糕的主意，因为这样人们就可以上传巨大的图像，从而破坏网页

您的网站应具有最大宽度：

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

您的图像还应：

.image {
  max-width: 80%;
  height: auto;
  margin: 0 auto;
}

这样就不会破坏屏幕大小。如果你一定要让它是全尺寸的，即使它有20000像素宽，那么在一个新的选项卡中用

target=“\u blank”

点击它，使它成为一个新的链接

<a href="file.png" target="_blank"><img src="file.png"></a>

至于PHP端，有很多关于如何通过PHP上传文件的指南。需要考虑的主要问题是安全性，因为人们可以在上传中嵌入恶意程序，所以请确保您使用的示例具有某种安全性（限制文件扩展名和mime类型等）

---

如下所示：

在PHP中，您可以利用getimagesize（）函数获取上传图像的详细信息

例如：

// Calling getimagesize() function 
list($width, $height, $type, $attr) = getimagesize("image.png"); 

// Displaying dimensions of the image 
echo "Width of image : " . $width . "<br>"; 

echo "Height of image : " . $height . "<br>"; 

echo "Image type :" . $type . "<br>"; 

echo "Image attribute :" .$attr; 

//调用getimagesize（）函数
列表（$width、$height、$type、$attr）=getimagesize（“image.png”）；
//显示图像的尺寸
回声“图像宽度：”$宽度。“
”；
回声“图像高度：”$高度。“
”；
回声“图像类型：”$类型。“
”；
echo“图像属性：”.$attr；

---

至于实际显示上传大小的图像，我也不得不说这样做是一个坏主意，因为您的整个布局可能会中断，但可能应该做的是创建一个合适大小的缩略图，并使用lightbox在单击时以正常大小显示图像

您可以使用

naturalWidth

和

naturalHeight

属性。不需要PHP

document.querySelector（`img`）.addEventListener（`load`，function（））{
log（`width:${this.naturalWidth}`）；
log（`height:${this.naturalHeight}`）；
});
img{
宽度：100px；
高度：100px；
}
您是否计划让他们将图像提交到服务器，还是希望所有这些都在客户端本地完成？第一个选项-用户必须将图像提交到服务器，但JavaScript可以从php获取变量？我删除了我的评论，请参阅下面的回答。不需要服务器交互。我对上传图像的过程（文件类型和文件大小）有限制。我将设置包装的最大宽度（完全没有设置）。target=“\u blank”的想法很棒，与9GAG的工作方式相同。谢谢我认为你是对的。我应该使用lightbox（Facebook图像和视频的工作方式）或在新选项卡中显示图像（9GAG使用的方法）。你也可以使用fancybox，它有更多的显示选项！