طول و عرض تصویر داخل file input با جاوا اسکریپت

سلام دوستان..
file input برای تصویر دارم..
میخوام وقتی توی file input یه تصویر انتخاب شد قبل از اینکه اونو توی img نشون بدم از طریق جاوا اسکریپت طول و عرضشو مقایسه کنم اگر برابر بود (تصویر مربعی بود) برام توی img لود کنه در غیر اینصورت alert بده...

هر کار میکنم نمیتونم طول و عرض تصویر اون فایل انتخابی رو بدست بیارم.. ممنون میشم راهنماییم کنید..

ثبت پرسش جدید

سینا شاه‌اویسی

تخصص : برنامه نویس فرانت اند

@sinashahoveisi 4 سال پیش مطرح شد

سلام به این صورت

<!DOCTYPE html>
<html>
    <head>

        <meta charset=utf-8 />
        <title>JS Bin</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
        <style>
            article, aside, figure, footer, header, hgroup,
            menu, nav, section { display: block; }
        </style>
    </head>
    <body>
        <input type='file' />
        <img id="blah" src="#" alt="your image" />
        <script class="jsbin"  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script  class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
        <script>
            document.querySelector('input').addEventListener('change' ,  function () {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        $('#blah').attr('src', e.target.result)
                        const img = new Image();
                        img.onload = function() {
                            console.log(this.width + 'x' + this.height);
                        }
                        img.src = e.target.result
                    };

                    reader.readAsDataURL(this.files[0]);
                }
            })

        </script>
    </body>
</html>

ارسال پاسخ

Mohammad MohammadAlian

تخصص : توسعه دهنده سمت سرور

@mhmda83 4 سال پیش مطرح شد

می‌تونید تصویر رو توی یه المنت img لود بکنی، بعد توی ایونت onload اون image بیا width و height المنت رو بگیر و بعد مثلا src رو خالیش کن یا هرچی

ارسال پاسخ

سینا شاه‌اویسی

تخصص : برنامه نویس فرانت اند

@sinashahoveisi 4 سال پیش مطرح شد

سلام به این صورت

<!DOCTYPE html>
<html>
    <head>

        <meta charset=utf-8 />
        <title>JS Bin</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
        <style>
            article, aside, figure, footer, header, hgroup,
            menu, nav, section { display: block; }
        </style>
    </head>
    <body>
        <input type='file' />
        <img id="blah" src="#" alt="your image" />
        <script class="jsbin"  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script  class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
        <script>
            document.querySelector('input').addEventListener('change' ,  function () {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        $('#blah').attr('src', e.target.result)
                        const img = new Image();
                        img.onload = function() {
                            console.log(this.width + 'x' + this.height);
                        }
                        img.src = e.target.result
                    };

                    reader.readAsDataURL(this.files[0]);
                }
            })

        </script>
    </body>
</html>

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

طول و عرض تصویر داخل file input با جاوا اسکریپت

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید