2024.1.16-每日进度笔记

佚名 / 2024-01-16 / 原文

今天，尝试在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>