Редактировать
Чтобы получить текущий размер пикселя в браузере элемента DOM (в вашем случае элементов IMG), исключая границы и поля, вы можете использовать свойства clientWidth и clientHeight .
var img = document.getElementById('imageId');
var width = img.clientWidth;
var height = img.clientHeight;
Теперь, чтобы получить размер файла, теперь я могу думать только о свойстве fileSize , которое Internet Explorer предоставляет для документа и IMG элементов ...
Редактировать 2: Что-то приходит мне в голову ...
Чтобы получить размер файла, размещенного на сервере, вы можете просто сделать HEAD HTTP-запрос , используя Ajax. Этот вид запроса используется для получения метаинформации о URL, подразумеваемом запросом, без передачи какого-либо его содержания в ответе.
В конце HTTP-запроса у нас есть доступ к HTTP-заголовкам ответа, включая Content-Length , который представляет размер файла в байтах.
Базовый пример использования raw XHR :
var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'img/test.jpg', true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
} else {
alert('ERROR');
}
}
};
xhr.send(null);
Примечание: Имейте в виду, что когда вы делаете запросы Ajax, вы ограничены Одинаковой политикой происхождения , которая позволяет вам делать запросы только в пределах одного домена.
Проверьте рабочее подтверждение концепции здесь .
Редактировать 3:
1.) Что касается Content-Length, я думаю, что несоответствие размера может произойти, например, если ответ сервера разархивирован, вы можете выполнить несколько тестов, чтобы увидеть, происходит ли это на вашем сервере.
2.) Чтобы получить исходные размеры изображения, вы можете создать элемент IMG программно, например:
var img = document.createElement('img');
img.onload = function () { alert(img.width + ' x ' + img.height); };
img.src='http://sstatic.net/so/img/logo.png';