Как можно определить размер файла в JavaScript?

Как вы знаете, IE поддерживает свойство fileSize изображения. В других браузерах нет такой удачи ... однако вы можете изменить этот сценарий:

http://natbat.net/2008/Aug/27/addSizes/

Он использует JSON для чтения HTTP-заголовков файлы и отображать их фактический размер. Это должно помочь вам предотвратить загрузку больших анимированных GIF-файлов.

Что касается получения размеров:

var img = new Image();
theImage.src = "someimage.jpg";
actualwidth = theImage.width;
actualheight = theImage.height;

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

Проверка на стороне клиента недостаточна для достижения вашей цели. Простой почтовый запрос позволит пользователю загрузить любое изображение, которое он хочет, независимо от того, какой HTML или JavaScript вы им предоставите.

Проверка на стороне сервера всегда лучше, но в вашем случае Я понимаю, почему вы захотите сделать эту клиентскую часть.

Кроме того, кажется, что другие могли неправильно истолковать вопрос и что изображения, которые Даниэль хочет протестировать, уже загружены, и в этом случае существует довольно простой метод этого (при условии, что изображения находятся в том же домене, что и сценарий)

var getFileSize = function(address, responseHandler) {
  var req = new XMLHttpRequest();  

  req.open('head', address, true);  
  req.onreadystatechange = responseHandler;
  req.send(null);  
}

var responseHandler = function(resp) {
  if ( this.readyState == 1 ) {
    this.abort();
  }
  console.log(this.getResponseHeader("Content-length"));
};

getFileSize("http://stackoverflow.com/content/img/so/logo.png", responseHandler);

Бум. Этот пример работает в FF3 и, вероятно, в 2. Поскольку для этого вы используете Greasemonkey, совместимость браузера не кажется проблемой.

Я не уверен, разделяет ли Greasemonkey те же ограничения домена XML RPC, но если файлы изображений, которые вам нужны, находятся в другом домене, чем скрипт, тогда вам, возможно, придется изучить магию iframe.

в этом случае есть довольно простой способ сделать это (при условии, что изображения находятся в том же домене, что и сценарий).

var getFileSize = function(address, responseHandler) {
  var req = new XMLHttpRequest();  

  req.open('head', address, true);  
  req.onreadystatechange = responseHandler;
  req.send(null);  
}

var responseHandler = function(resp) {
  if ( this.readyState == 1 ) {
    this.abort();
  }
  console.log(this.getResponseHeader("Content-length"));
};

getFileSize("http://stackoverflow.com/content/img/so/logo.png", responseHandler);

Бум. Этот пример работает в FF3 и, вероятно, в 2. Поскольку для этого вы используете Greasemonkey, совместимость браузера не кажется проблемой.

Я не уверен, разделяет ли Greasemonkey те же ограничения домена XML RPC, но если файлы изображений, которые вам нужны, находятся в другом домене, чем скрипт, тогда вам, возможно, придется изучить магию iframe.

в этом случае есть довольно простой способ сделать это (при условии, что изображения находятся в том же домене, что и сценарий).

var getFileSize = function(address, responseHandler) {
  var req = new XMLHttpRequest();  

  req.open('head', address, true);  
  req.onreadystatechange = responseHandler;
  req.send(null);  
}

var responseHandler = function(resp) {
  if ( this.readyState == 1 ) {
    this.abort();
  }
  console.log(this.getResponseHeader("Content-length"));
};

getFileSize("http://stackoverflow.com/content/img/so/logo.png", responseHandler);

Бум. Этот пример работает в FF3 и, вероятно, в 2. Поскольку для этого вы используете Greasemonkey, совместимость браузера не кажется проблемой.

Я не уверен, разделяет ли Greasemonkey те же ограничения домена XML RPC, но если файлы изображений, которые вам нужны, находятся в другом домене, чем скрипт, тогда вам, возможно, придется изучить магию iframe.

Вы можете установить максимальный размер файла в HTML, куда они загружают файлы.

<input type="hidden" name="MAX_FILE_SIZE" value="10000000">

(max_file_size в байтов).

Однако это "недокументированный / неподдерживаемый" элемент некоторых браузеров. Лучше всего проверить размер файла на сервере после его загрузки.

Вы также можете использовать апплет Flash или Java для обработки загрузки и проверки файла там. См. http://www.masrizal.com/product/custom%20tag/cf_flashmultiupload/docs%20&%20examples/example.cfm и http: //www.saschawenning.

Атрибут DOM img.fileSize вернет фактический размер файла , на который имеется ссылка. Доступ к объекту img можно получить с помощью JQuery или коллекции изображений DOM. Однако это расширение только для IE.

Другой подход состоит в том, чтобы опустить атрибуты высоты и ширины в теге , чтобы загружалось полное изображение, а затем используйте img.height и img.width для определения размера загруженного изображения. Этот код можно поместить на страницу редактора профиля пользователя в качестве промежуточного шага между тем, чтобы кто-то ввел свою подпись в формате HTML, а затем показал им предварительный просмотр их подписи. Неуклюже, должен признать, но возможно.

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

Facebook делает это для большинства загружаемых изображений, чтобы отображались изображения разумного размера. Даже преобразование их в формат png в некоторых (в большинстве?) Случаях, что сводит творческую группу с ума из-за "потери качества".

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

Подробнее здесь .