حل شده

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

سلام..

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

راهی هست که بشه وقتی کاربر تصویر رو از تو کامپیوترش انتخاب کرد قبل از اینکه روی دکمه submit کلیک کنه و آپلود بشه توی سرور یه پیش نمایش از تصویرش رو توی تگ 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 سال پیش مطرح شد

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

-1

ارسال پاسخ