Получите размеры изображения, используя Javascript во время загрузки файла - PullRequest
Новая
       32

Получите размеры изображения, используя Javascript во время загрузки файла

12 голосов
/ 19 мая 2010

У меня есть элемент пользовательского интерфейса загрузки файлов, в который пользователь будет загружать изображения. Здесь я должен проверить высоту и ширину изображения на стороне клиента. Можно ли найти размер изображения, имеющего только путь к файлу в JS?

Примечание: Если нет, есть ли другой способ найти размеры на стороне клиента?

Ответы [ 5 ]

20 голосов
/ 19 мая 2010

Это можно сделать в браузерах, которые поддерживают новый File API из W3C, используя функцию readAsDataURL в интерфейсе FileReader и назначая URL-адрес данных для src из img (после чего вы можете прочитать height и width изображения). В настоящее время Firefox 3.6 поддерживает File API, и я думаю, что Chrome и Safari уже поддерживают или собираются это сделать.

Итак, ваша логика на переходном этапе будет выглядеть примерно так:

  1. Определить, поддерживает ли браузер File API (это просто: if (typeof window.FileReader === 'function')).

  2. Если это так, отлично, прочитайте данные локально и вставьте их в изображение, чтобы найти размеры.

  3. Если нет, загрузите файл на сервер (возможно, отправив форму из iframe, чтобы не покидать страницу), а затем опросите сервер, спрашивая, насколько велико изображение (или просто запрашивайте загруженное изображение, если вы предпочитаете).

Редактировать Я имел в виду некоторое время прорабатывать пример File API; вот один: 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show Image Dimensions Locally</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>

    function loadImage() {
        var input, file, fr, img;

        if (typeof window.FileReader !== 'function') {
            write("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('imgfile');
        if (!input) {
            write("Um, couldn't find the imgfile element.");
        }
        else if (!input.files) {
            write("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            write("Please select a file before clicking 'Load'");
        }
        else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = createImage;
            fr.readAsDataURL(file);
        }

        function createImage() {
            img = document.createElement('img');
            img.onload = imageLoaded;
            img.style.display = 'none'; // If you don't want it showing
            img.src = fr.result;
            document.body.appendChild(img);
        }

        function imageLoaded() {
            write(img.width + "x" + img.height);
            // This next bit removes the image, which is obviously optional -- perhaps you want
            // to do something with it!
            img.parentNode.removeChild(img);
            img = undefined;
        }

        function write(msg) {
            var p = document.createElement('p');
            p.innerHTML = msg;
            document.body.appendChild(p);
        }
    }

</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='imgfile'>
<input type='button' id='btnLoad' value='Load' onclick='loadImage();'>
</form>
</body>
</html>

Отлично работает на Firefox 3.6. Я избегал использования там какой-либо библиотеки, поэтому извиняюсь за обработчики событий в стиле атрибута (DOM0) и тому подобное.

9 голосов
/ 05 апреля 2012

Предыдущий пример хорошо, но он далек от совершенства. 

var reader  = new FileReader();

reader.onload   = function(e)
{
    var image   = new Image();

    image.onload    = function()
    {
        console.log(this.width, this.height);
    };

    image.src   = e.target.result;
};

reader.readAsDataURL(this.files[0]);
1 голос
/ 19 мая 2010

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

Я рекомендую SWFUpload и никоим образом не связан с ними, кроме как как пользователь.

Вы также можете написать элемент управления silverlight, чтобы выбрать файл и загрузить его.

1 голос
/ 19 мая 2010

Нет, вы не можете, имя файла и содержимое файла отправляются на сервер в теле http header , javascript не может управлять этими полями.

0 голосов
/ 05 августа 2010

HTML5 определенно является правильным решением здесь. Вы должны всегда кодировать будущее, а не прошлое. Наилучший способ справиться с браузерами HTML4 - использовать устаревшую функциональность или использовать Flash (но только если браузер не поддерживает файловый API HTML5)

Использование события img.onload позволит вам восстановить размеры файла. Это работает для приложения, над которым я работаю.

...