طول و عرض تصویر داخل file input با جاوا اسکریپت
سلام دوستان..
file input برای تصویر دارم..
میخوام وقتی توی file input یه تصویر انتخاب شد قبل از اینکه اونو توی img نشون بدم از طریق جاوا اسکریپت طول و عرضشو مقایسه کنم اگر برابر بود (تصویر مربعی بود) برام توی img لود کنه در غیر اینصورت alert بده...
هر کار میکنم نمیتونم طول و عرض تصویر اون فایل انتخابی رو بدست بیارم.. ممنون میشم راهنماییم کنید..
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
گزارش تخلف
کپی کردن
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)
const img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = e.target.result
};
reader.readAsDataURL(this.files[0]);
}
})
</script>
</body>
</html>
گزارش تخلف
کپی کردن
1
می‌تونید تصویر رو توی یه المنت img لود بکنی، بعد توی ایونت onload اون image بیا width و height المنت رو بگیر و بعد مثلا src رو خالیش کن یا هرچی
گزارش تخلف
کپی کردن
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)
const img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = e.target.result
};
reader.readAsDataURL(this.files[0]);
}
})
</script>
</body>
</html>