سلام..
یه فرم ساخت پروفایل دارم..
توش یه file input برای تصویر دارم..
یه دونه هم تگ img
راهی هست که بشه وقتی کاربر تصویر رو از تو کامپیوترش انتخاب کرد قبل از اینکه روی دکمه submit کلیک کنه و آپلود بشه توی سرور یه پیش نمایش از تصویرش رو توی تگ img داشته باشه؟
ممنون میشم راهنمایی کنید..
سلام به این صورت
<!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>
سلام
آره میشه
با جاوا اسکریپت عکس انتخاب شده رو بزار به عنوان بکگراند یه div یا توی img نشون بده
با استفاده از ajax یا axios میتونید تصویر رو قبل از ارسال به کاربر نمایش بدید. این قضیه رو سرچ کنید آموزش براش زیاده
سلام به این صورت
<!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>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟