Как вы можете определить размер файла в JavaScript? - PullRequest
Новая
       24

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

10 голосов
/ 14 июля 2009

Я помогаю модерировать форум онлайн, и на этом форуме мы ограничиваем размер подписей. На данный момент мы проверяем это с помощью простого скрипта Greasemonkey, который я написал; мы обертываем все подписи <div>, скрипт ищет их, а затем измеряет высоту и ширину div.

Все, что сейчас делает скрипт, - убедитесь, что подпись находится на определенной высоте / ширине. Я хотел бы начать измерять размер файла изображений внутри подписи автоматически, чтобы скрипт мог автоматически помечать пользователей, которые включают огромные изображения в свою подпись. Тем не менее, я не могу найти способ измерить размер изображений, загруженных на страницу. Я искал и нашел специальное свойство для IE (element.fileSize), но, очевидно, не могу использовать его в своем скрипте Greasemonkey.

Есть ли способ узнать размер файла изображения в Firefox через JavaScript?

Редактировать: Люди неправильно истолковывают проблему. На самих форумах не размещаются изображения; мы размещаем BBCode, который люди вводят в качестве своей подписи. Так, например, люди вводят это: 

This is my signature, check out my [url=http://google.com]awesome website[/url]!
This image is cool!  [img]http://image.gif[/img]

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

Ответы [ 10 ]

5 голосов
/ 28 июня 2012

На самом деле, с HTML5 это теперь возможно,
читать дальше здесь .

5 голосов
/ 14 июля 2009

Как вы знаете, 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;

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

3 голосов
/ 14 июля 2009

Короткий ответ, вы не можете

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

Вы найдете несколько важных моментов

Ну, ответ очень прост, вы не можете.

Причина: безопасность браузера не разрешает скрипты (Javascript / VBScript) или даже апплеты и элементы управления ActiveX для чтения файлы с локального жесткого диска. Вы можете только читать файлы, если ваш код подписан неким центром сертификации (CA). Теперь тип ввода «ФАЙЛ» также не имеет разрешения на чтение файлов. Мы не можем сделать что-нибудь об этом, так как то, что говорит HTML. Так как это не может читать файлы, он не может найти размер файла, с которым ввод тег связан. Поскольку он не может найти размер файла, нет функция, предоставляемая JavaScript / VBScript для возврата размера файла. Но если вам нужно найти размер файла, скажем, чтобы ограничить размер файла, загруженного на ваш веб-сервер. Тогда вы можете сделать это подсчет содержимого файла на стороне сервера, как только пользователь отправляет это к серверу. Вот что нравится многим из бесплатных провайдеров электронной почты www.hotmail.com do.

2 голосов
/ 14 июля 2009

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

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

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

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

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

1 голос
/ 14 июля 2009

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

0 голосов
/ 26 июня 2012

Вы можете сделать этот файл HTML5 JS File API

Вы можете протестировать приведенные ниже коды в моей веб-среде (но используйте Google Chrome или FF): http://codesocialist.com/#/?s=bN

Приведенные ниже коды получают тип файла и размер файла для вас:) 

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {

    // Great success! All the File APIs are supported.
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes </strong></li>');
        }

        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }

    // Bind Event Listener
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

} else {
    alert('The File APIs are not fully supported in this browser.');
}
0 голосов
/ 14 июля 2009

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

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

0 голосов
/ 14 июля 2009

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

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

0 голосов
/ 14 июля 2009

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

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

0 голосов
/ 14 июля 2009

Вы можете установить максимальный размер файла в вашем 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.de/labor/flash8/fileUpload/ для примеров.

...