input-file 图片上传尺寸验证

最新推荐文章于 2020-12-01 20:00:26 发布

原创最新推荐文章于 2020-12-01 20:00:26 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #图片

js；html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面包含用于上传图片的表单，并通过JavaScript进行客户端尺寸验证。当用户尝试上传图片时，脚本会检查图片是否超过指定的最大尺寸（Logo：200px * 200px；ID照片：200px * 400px），如果图片尺寸不符合要求，则会提示用户。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uploadimg.html

<!DOCTYPE html>
<html lang="utf-8">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="test2.js"></script>
</head>
<body>
	<form action="upload.do">
		<input type="file" name="logo"  id="logo" onChange="handleConLogo(this.files);" accept="image/*"> <br>
		<input type="file" name="id_photo"  id="id_photo" onChange="handleConId_photo(this.files);" accept="image/*"> <br>
		<input type="submit" value="提交">
		<a href="http://www.gaitubao.com/" target="_black">图片尺寸修改</a>
	</form>
</body>
</html>

uploadimg.js

var width,height;
function handleConLogo(files){

   for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    var ret = [];
    reader.onload = function(theFile) {
        var image = new Image();
        image.onload = function() {
            width=this.width; 
            height=this.height;
            if(width> 200 || height> 200){
                fill = false;
                alert("图片像素不符合，应小于200px*200px，建议重新上传!");
            }else{
                alert("图片格式符合要求！")
            }
        };
        image.src = theFile.target.result;
    }
    reader.readAsDataURL(file);
}
}
function handleConId_photo(files){

   for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    var ret = [];
    reader.onload = function(theFile) {
        var image = new Image();
        image.onload = function() {
            width=this.width; 
            height=this.height;
            if(width> 200 || height> 400){
                fill = false;
                alert("图片像素不符合，应小于200px*400px,建议重新上传！");
            }else{
                alert("图片格式符合要求！")
            }
        };
        image.src = theFile.target.result;
    }
    reader.readAsDataURL(file);
}
}