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

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

سلام..

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

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

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


ثبت پرسش جدید
سینا شاه‌اویسی
تخصص : برنامه نویس فرانت اند
@sinashahoveisi 4 سال پیش مطرح شد
1

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

<!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 4 سال پیش مطرح شد
-1

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


جواد کرمی
تخصص : توسعه دهنده وب و اپلیکیشن | فر...
@javadkarami 4 سال پیش مطرح شد
0

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


سینا شاه‌اویسی
تخصص : برنامه نویس فرانت اند
@sinashahoveisi 4 سال پیش مطرح شد
1

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

<!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 4 سال پیش مطرح شد
0

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


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

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