gpt4 book ai didi

javascript - fileReader Javascript 的结果并不总是相同

转载 作者:行者123 更新时间:2023-11-28 07:57:18 25 4
gpt4 key购买 nike

我正在使用 fileReader 检查上传的个人资料图片是否符合我的条件。但是,我并不总是得到相同的结果。你能帮我修复这个错误吗?

这是我的 html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>File API</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page-wrapper">

<h1>Image File Reader</h1>
<div>
Select an image file:
<input type="file" id="fileInput">
</div>

</div>

<script src="images.js"></script>
</body>
</html>

这是我的 javascript/fileReader (images.js) 代码:

window.onload = function() 
{
var width=0;
var height=0;
var exten= false;
var size = false;

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');


fileInput.addEventListener('change', function(e)
{
var file = fileInput.files[0];
var imageType = /image.png/;

if (file.type.match(imageType))
{
exten = true;
var reader = new FileReader();

reader.onload = function(e)
{
var img = new Image();
img.src = reader.result;

img.onload = function()
{
width=this.width;
height=this.height;
}
}

reader.readAsDataURL(file);
}
else
{
exten= false;
}

if(width == 50 && height ==50)
{
size = true;
}
else
{
size = false;
}

//Here, we check that the image matches with png and 50*50px
if(size && exten)
{
alert('Your image is ok.');
}
else
{
if(!size && !exten)
{
alert('Image needs to be 50*50px and in png');
}
else
{
if(!size && exten)
{
alert('Image needs to be 50*50px');
}
else
{
if(size && !exten)
{
alert('Image needs to be in png');
}
}
}
}
});
}

感谢您的帮助

最佳答案

在检查宽度高度之前,您必须等待img.onload事件的执行。

事件处理程序外部并使用这些属性的代码应移至其中。

关于javascript - fileReader Javascript 的结果并不总是相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25930335/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com