как проверить размер и размеры изображения перед сохранением изображения в базе данных - PullRequest
Новая
       1

как проверить размер и размеры изображения перед сохранением изображения в базе данных

0 голосов
/ 15 октября 2011

Я использую ASP.NET C # 4.0, моя веб-форма состоит из файла типа ввода для загрузки изображений.

мне нужно проверить изображение на стороне клиента, прежде чем сохранить его в моей базе данных SQL

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

нужна ваша помощь Спасибо

Ответы [ 2 ]

3 голосов
/ 15 октября 2011

вы можете сделать что-то вроде этого ...

Это можно сделать в браузерах, которые поддерживают новый 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, чтобы не покидать страницу), а затем опросите сервер, спрашивая, насколько велико изображение (или просто запрашивайте загруженное изображение, если вы предпочитаете).

Редактировать Я имел в виду некоторое время работать над примером 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) и тому подобное.

1 голос
/ 15 октября 2011 
function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload

}
...