JBolouri

5 سال پیش توسط JBolouri مطرح شد

پیش نمایش تصویر قبل از آپلود

سلام..

یه فرم ساخت پروفایل دارم..
توش یه file input برای تصویر دارم..
یه دونه هم تگ img

راهی هست که بشه وقتی کاربر تصویر رو از تو کامپیوترش انتخاب کرد قبل از اینکه روی دکمه submit کلیک کنه و آپلود بشه توی سرور یه پیش نمایش از تصویرش رو توی تگ img داشته باشه؟

ممنون میشم راهنمایی کنید..

ثبت پرسش جدید

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

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

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

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

<!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)
                            .width(200)
                            .height(200);
                    };

                    reader.readAsDataURL(this.files[0]);
                }
            })
        </script>
    </body>
</html>

ارسال پاسخ

saman

@saman1111 5 سال پیش مطرح شد

-1

سلام
آره میشه
با جاوا اسکریپت عکس انتخاب شده رو بزار به عنوان بکگراند یه div یا توی img نشون بده

ارسال پاسخ

جواد کرمی

تخصص : توسعه دهنده وب و اپلیکیشن | فر...

@javadkarami 5 سال پیش مطرح شد

با استفاده از ajax یا axios میتونید تصویر رو قبل از ارسال به کاربر نمایش بدید. این قضیه رو سرچ کنید آموزش براش زیاده

ارسال پاسخ

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

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

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

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

<!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)
                            .width(200)
                            .height(200);
                    };

                    reader.readAsDataURL(this.files[0]);
                }
            })
        </script>
    </body>
</html>

ارسال پاسخ

JBolouri

@javadbolouri72 5 سال پیش مطرح شد

@sinashahoveisi
ممنونم دوست عزیزم 🙏🌷

ارسال پاسخ

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

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

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

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

پیشرفت من

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

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

محبوب‌ترین آموزش‌ها

پیش نمایش تصویر قبل از آپلود

گزینش سوالات

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

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

تگ‌های محبوب

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