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

سلام..

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

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

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

html_css html img

ثبت پرسش جدید

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

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

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

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

<!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

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

-1

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

ارسال پاسخ

جواد کرمی

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

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

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

ارسال پاسخ

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

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

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

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

<!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

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

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

ارسال پاسخ

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

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