A. js 檢查圖片尺寸
如何獲取圖片的原始尺寸大小？
如下，當給 img 設置一個固定的大小時，要怎樣獲取圖片的原始尺寸呢？
#oImg{
width: 100px;
height: 100px;
}
<img src="images/test.jpg" id="oImg" alt="">
方法一：
HTML5提供了一個新屬性 naturalWidth / naturalHeight 可以直接獲取圖片的原始寬高。這兩個屬性在Firefox/Chrome/Safari/Opera及IE9里已經實現。
w = document.getElementsByTagName("img")[0].naturalWidth;
h = document.getElementsByTagName("img")[0].naturalHeight;
console.log(w + ' ' + h);
列印出來的結果與原始尺寸相符。但有個前提是，必須在圖片完全下載到客戶端瀏覽器才能判斷。
如果是不支持的版本瀏覽器，那可以用傳統方法判斷，如下：
var img = document.getElementById("oImg"),
w,h;if (oImg.naturalWidth) {// HTML5 browsersw = oImg.naturalWidth;
h = oImg.naturalHeight;
} else {// IE 6/7/8var nImg = new Image();// nImg.src = oImg.src;nImg.onload = function () {
w = nImg.width;
h = nImg.height;
console.log(w + " " + h)
}
nImg.src = oImg.src;}
此時為什麼要加 onload 的原因是，圖片可能沒載入完成，導致圖片的 width 、height 無法獲取到。
這里還有有個點要注意，nImg.src = oImg.src 這段代碼為什麼要放在 nImg.onload 函數後面？ 這樣做是為了兼容 ie 。ie 除了第一次載入圖片時候獲取正常，之後再刷新就沒有反應了。其他大部分瀏覽器獲取正常。這是什麼原因呢？
原因也挺簡單的，就是因為瀏覽器的緩存了。當圖片載入過一次以後，如果再有對該圖片的請求時，由於瀏覽器已經緩存住這張圖片了，不會再發起一次新的請求，而是直接從緩存中載入過來。對於大部分瀏覽器，它們視圖使這兩種載入方式對用戶透明，同樣會引起圖片的onload事件，而 ie 則忽略了這種同一性，不會引起圖片的onload事件。。。一般情況下，可以用 complete 來判斷圖片是否載入完畢。對於 complete 屬性來講，IE是根據圖片是否顯示過來判斷，就是說當載入的圖片顯示出來後，complete 屬性的值才為true ，否則一直是false ，和以前是否載入過該張圖片沒有關系，即和緩存沒有關系！可以寫如下的函數來做到各個瀏覽器中預載入圖片的兼容性。如下：
var img = document.getElementById("oImg"),
w,h;if (oImg.naturalWidth) {
// HTML5 browsersw = oImg.naturalWidth;
h = oImg.naturalHeight;
} else {
// IE 6/7/8var nImg = new Image();
nImg.src = oImg.src;
if(nImg.complete) { // 圖片已經存在於瀏覽器緩存console.log(nImg.width + " " + nImg.height);
}else{
nImg.onload = function () {
w = nImg.width;
h = nImg.height;
console.log(w + " " + h);
}
}
}
最後封裝成函數，如下：
function getImgNaturalDimensions(oImg, callback) {var nWidth, nHeight;
if (!oImg.naturalWidth) { // 現代瀏覽器nWidth = oImg.naturalWidth;
nHeight = oImg.naturalHeight;
callback({w: nWidth, h:nHeight});
} else { // IE6/7/8var nImg = new Image();
nImg.onload = function() { var nWidth = nImg.width,
nHeight = nImg.height;
callback({w: nWidth, h:nHeight});
}
nImg.src = oImg.src;
}
}
var img = document.getElementById("oImg");getImgNaturalDimensions(img, function(dimensions){
console.log(dimensions.w);
});
方法二：（圖片不需要再頁面中展示）
將 img 放在頁面中不可見的位置上，缺點是：這種方法需要瀏覽器載入這張圖片
.imgbox{// img 盒子width: 0;
overflow: hidden;
}
然後在去取圖片寬高等信息：
function getImgNaturalDimensions2(oImg) {var nWidth, nHeight;if (!oImg.naturalWidth) { // 現代瀏覽器nWidth = oImg.naturalWidth;
nHeight = oImg.naturalHeight;return ({w: nWidth, h:nHeight});
} else { // IE6/7/8nWidth = oImg.width;
nHeight = oImg.height;return ({w: nWidth, h:nHeight});
}
}var getImg = getImgNaturalDimensions2(img);
console.log(getImg)
然而，到這里，是不是萬事大吉了呢？答案當然是否定的。
你用這種方法做後，會發現你有時可以取得 img 的 width、height ，但有時會是個 0。原因見下節分析。
我們先看如何正常去取吧！
var img = document.getElementById("oImg");
img.onload = function(){ //方法一 getImgNaturalDimensions(img, function(dimensions){
console.log(dimensions.w);
}); //方法二
var getImg = getImgNaturalDimensions2(img);
console.log(getImg);
}
只需在 img.onload 函數內去調用函數。
B. 求JS獲取圖片大小和尺寸的代碼
獲得文件大小大概有兩種解決方法：
(一)使用document.getElementById或者document.createElement的或者var img=new Image();
然後在onreadystatechange事件里檢查大小
但這種代碼通用性不強瀏覽器兼容存在問題一直無法解決
(二)使用FSO控制項，但這樣存在安全問題
<div id="photoyn"><input id="file1" type="file" onchange="ShowSize(this.value)" />
<script type="text/javascript">
function ShowSize(files){
var fso,f;
fso=new ActiveXObject("Scripting.FileSystemObject");
f=fso.GetFile(files);
var mySize = f.size/1024;
alert(mySize+" K ");
var myName = f.Name;
var myPath = f.Path;
var myDrive = f.Drive;
var myType = f.type;
var myAttributes = f.Attributes;
var myDateCreated = f.DateCreated;
}
</script>
所以說要在客戶端檢測文件大小沒有實現方法。
最終解決方案還是在伺服器端檢測，在上傳的過程中，在伺服器的內存中進行判斷並返回信息給客戶端。
C. 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);
}
D. JS獲取圖片大小時錯誤
代碼修改如下：
<script language="JavaScript" type="text/javascript">
<!--
function checkImgSize(){
var file = document.getElementById("img");
if(file.value != ""){
//檢測類型
var val = file.value;
if(/^.*?\.(gif|jpg|jpeg|bmp|GIF|JPG|JPEG|BMP)$/.test(val)){
}else{
alert("只能上傳gif, jpg, bmp格式的圖片");
return false;
}
var imgSize = 1024 * 200; //最大200K
var img = new Image();
img.onreadystatechange = function(){
if(img.readyState == "complete"){
var fso=new ActiveXObject("Scripting.FileSystemObject");
var fileSize=fso.GetFile(val).Size;
if(fileSize > imgSize){
alert("當前文件大小" + fileSize + "KB,圖片太大!");
}else{
alert("當前文件大小" + fileSize + "KB");
return true;
}
}
}
img.src = val;
}else{
alert("請選擇上傳的文件!");
return false;
}
}
// -->
</script>
<table border="0" width="95%" cellspacing="0" cellpadding="0" align="center">
<form name="addform" enctype="multipart/form-data" method="post" action="save.asp" onSubmit="return checkImgSize()">
<tr>
<td height="25" width="94">圖片地址</td>
<td><input type="file" name="sf_upfile" id="img" size="19"> <input type="submit" value="上 傳" name="submit"></td>
</tr>
</form>
</table>
E. JS獲取圖片大小（長寬）問題
可以配合JS來實現獲到本地磁碟圖片文件的相關屬性，請參照天南（QQ：46926125）提供的DEMO： ##Code##
<script language="javascript">
function insertTitle(tValue){
var t1 = tValue.lastIndexOf("\\");
var t2 = tValue.lastIndexOf(".");
if(t1 >= 0 && t1 < t2 && t1 < tValue.length){
document.getElementById("pTitle").value = tValue;
document.getElementById("pTitlel").value = tValue.substring(t1 +1);
document.getElementById('guo').innerHTML="<img id='demo_img' src='"+tValue+"' />"
document.getElementById('imgc_width').value=document.getElementById('demo_img').width;
document.getElementById('imgc_height').value=document.getElementById('demo_img').height;
}
}
</script>
<form action="" method="get" onSubmit="return false;">
<input type="text" name="pTitle">
<input type="text" name="pTitlel">
<input type="file" name="pFile" onChange="if(this.value){insertTitle(this.value)};">
<input type="submit" value="submit">
</form>
圖片寬：<input type="text" id="imgc_width" />px
圖片高：<input type="text" id="imgc_height" />px
<hr />
<div id="guo"></div>