jquery 上传图片生成缩略图

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在上传图片并生成缩略图的场景中，jQuery 可以用来处理前端交互，如文件选择、表单提交等。

类型

在 jQuery 中处理图片上传并生成缩略图，通常涉及以下几种类型：

文件选择：使用 <input type="file"> 元素让用户选择图片文件。
表单提交：将选择的文件通过表单提交到服务器。
前端处理：使用 JavaScript 库（如 FileReader）在前端读取并处理图片文件。
后端处理：在服务器端使用图像处理库（如 ImageMagick、GraphicsMagick）生成缩略图。

应用场景

用户头像上传：在社交网站或论坛中，用户可以上传自己的头像，并自动生成不同尺寸的缩略图。
商品图片展示：在电商网站中，上传商品图片并生成缩略图以便于展示。
博客文章配图：在博客系统中，上传文章配图并生成缩略图以便于快速加载。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 和 FileReader API 在前端读取图片文件并生成缩略图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 图片上传生成缩略图</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="file" id="imageUpload" accept="image/*">
    <div id="thumbnail"></div>

    <script>
        $(document).ready(function() {
            $('#imageUpload').on('change', function() {
                var file = this.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var img = new Image();
                        img.src = e.target.result;
                        img.onload = function() {
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            var MAX_WIDTH = 100;
                            var MAX_HEIGHT = 100;
                            var width = img.width;
                            var height = img.height;

                            if (width > height) {
                                if (width > MAX_WIDTH) {
                                    height *= MAX_WIDTH / width;
                                    width = MAX_WIDTH;
                                }
                            } else {
                                if (height > MAX_HEIGHT) {
                                    width *= MAX_HEIGHT / height;
                                    height = MAX_HEIGHT;
                                }
                            }

                            canvas.width = width;
                            canvas.height = height;
                            ctx.drawImage(img, 0, 0, width, height);
                            $('#thumbnail').html(canvas.toDataURL('image/png'));
                        };
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
</body>
</html>