Ответ 1

Edit

Чтобы получить текущий размер пикселя в браузере элемента DOM (в ваших IMG-элементах), за исключением границы и поля, вы можете использовать clientWidth и clientHeight.

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

Теперь, чтобы получить размер файла, теперь я могу только думать о свойство fileSize, которое Internet Explorer предоставляет для документа и IMG элементы...

Изменить 2: Что-то приходит мне на ум...

Чтобы получить размер файла, размещенного на сервере, вы можете просто сделать HEAD HTTP Request с помощью 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, я думаю, что несоответствие размера могло бы произойти, например, если ответ сервера был gzipped, вы можете сделать несколько тестов, чтобы убедиться, что это происходит на вашем сервере.

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';

Ответ 2

Проверьте размер загруженного изображения с помощью Javascript

<script type="text/javascript">
    function check(){
      var imgpath=document.getElementById('imgfile');
      if (!imgpath.value==""){
        var img=imgpath.files[0].size;
        var imgsize=img/1024; 
        alert(imgsize);
      }
    }
</script>

Код HTML

<form method="post" enctype="multipart/form-data" onsubmit="return check();">
<input type="file" name="imgfile" id="imgfile"><br><input type="submit">
</form>

Ответ 3

Рабочие службы имеют доступ к информации заголовка, включая заголовок Content-Length.

Работникам службы немного сложно понять, поэтому я создал небольшую библиотеку под названием sw-get-headers.

Чем вам нужно:

• подписаться на библиотеку response event
• идентифицировать URL-адрес изображения среди всех сетевых запросов
• Здесь вы можете прочитать заголовок Content-Length!

Обратите внимание, что ваш веб-сайт должен быть на HTTPS, чтобы использовать сервис-работников, браузер должен быть совместим с работниками службы, а изображения должны быть на то же происхождение как ваша страница.

Ответ 4

Вы можете получить размеры с помощью getElement(...).width и ...height.

Так как JavaScript не может получить доступ к чему-либо на локальном диске по соображениям безопасности, вы не можете изучать локальные файлы. Это также верно для файлов в кеше браузера.

Вам действительно нужен сервер, который может обрабатывать запросы AJAX. На этом сервере установите службу, которая загружает изображение и сохраняет поток данных в фиктивном выходе, который просто подсчитывает байты. Обратите внимание, что вы не можете всегда полагаться на поле заголовка Content-length, поскольку данные изображения могут быть закодированы. В противном случае достаточно отправить HTTP-запрос HEAD.

Ответ 5

Как насчет этого:

var imageUrl = 'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg';
var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open('GET', imageUrl, true); 
xhr.responseType = 'blob';
xhr.onload = function() 
{
    blob = xhr.response;
    console.log(blob, blob.size);
}
xhr.send();

http://qnimate.com/javascript-create-file-object-from-url/

из-за той же политики происхождения, работающей только с тем же происхождением

Ответ 6

Вы можете найти размер изображения на странице, используя что-то вроде

document.getElementById('someImage').width

однако вам придется использовать что-то серверное

Ответ 7

Большинство людей ответили, как можно узнать размеры загруженного изображения, поэтому я просто попытаюсь ответить на другую часть вопроса - зная размер загруженного файла изображения.

Вы можете сделать это, используя время ресурса api. В частности, для этой цели можно использовать свойства transferSize, encodedBodySize и decodedBodySize.

Посмотрите мой ответ здесь для фрагмента кода и дополнительной информации, если вы ищете: JavaScript - получить размер в байтах из HTML img src

Ответ 8

Получение исходных размеров изображения

Если вам нужно получить исходные размеры изображения (не в контексте браузера). По этой причине свойства clientWidth и clientHeight не работали, так как он возвращает ложные значения, если изображение растягивается/сокращается через css.

Чтобы получить исходные размеры, используйте naturalHeight и naturalWidth.

var img = document.getElementById('imageId'); 

var width = img.naturalWidth;
var height = img.naturalHeight;

p.s. Это не отвечает на исходный вопрос, так как принятый ответ выполняет эту работу. Это вместо этого служит дополнением к нему.

Ответ 9

var img = new Image();
img.src = sYourFilePath;
var iSize = img.fileSize;

Ответ 10

Единственное, что вы можете сделать, это загрузить изображение на сервер и проверить размер и размер изображения, используя некоторый язык на стороне сервера, например С#.

Edit:

Ваша потребность не может быть выполнена с использованием только javascript.