今天，尝试在jsp中上传图片并进行预览，同时将上传的图片等比例缩小到预览区域内。
参考：百度文心一言的回复。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传预览</title>
</head>
<body>
<input type="file" id="imageUpload" accept="image/*">
<div id="preview"
style="width: 200px; height: 200px; border: 1px solid #000;"></div>
<script type="text/javascript">
document.getElementById('imageUpload').addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onloadend = function() {
var img = new Image(); // 创建一个新的Image对象
img.onload = function() {
// 检查图片是否大于预览区域的大小，并进行等比例缩放
if (img.width > 200 || img.height > 200) {
var scale = Math.min(200 / img.width, 200 / img.height);
img.width *= scale;
img.height *= scale;
}
document.getElementById('preview').innerHTML = '<img src="' + reader.result + '" style="width: ' + img.width + 'px; height: ' + img.height + 'px;">'; // 设置图片的宽度和高度
}
img.src = reader.result; // 设置图片源为读取的数据URL
}
if (file) {
reader.readAsDataURL(file); // 将文件读取为数据URL
} else {
alert('请选择一个图片文件！');
}
});
</script>
</body>
</html>
标签：2024.1,预览,img,200,16,笔记,reader,var,图片 From： https://www.cnblogs.com/zhangxutong/p/17967952