Jsp+Servlet实现图片上传和点击放大预览功能(提供Gitee源码)

前言:在最近老项目的开发中,需要做一个图片上传和点击放大的功能,在Vue和SpringBoot框架都有现成封装好的组件和工具类,对于一些上世纪的项目就没这么方便了,所以需要自己用原生的代码去编写,这里分享一下我的完整代码,亲测可用。

目录

一、项目截图

二、功能演示

三、JSP页面完整代码

四、Servlet完整代码

五、Gitee源码


一、项目截图

注:需要自行引入以下这四个文件

二、功能演示

点击选择文件

 上传成功后

单击图片放大预览

三、JSP页面完整代码

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
    <script type="text/javascript" src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="image-preview"></div>
<input
        type="file"
        id="upload-input"
        accept="image/*"
        onchange="uploadImage()"
/>
<div id="outerDiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerDiv" style="position:absolute;">
        <img id="bigImg" style="border:5px solid #fff;" src=""/>
    </div>
</div>
</body>
<script>
    function uploadImage() {
        const input = document.getElementById("upload-input");
        const file = input.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (event) {
                const code = event.target.result;
                uploadFile(file,code);
            };
            reader.onerror = function (error) {
                console.error("Error reading the file:", error);
            };
            reader.readAsDataURL(file);
        }
    }

    function uploadFile(file,code){
        const formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: 'upload',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            processData: false,// 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success:function(res){
                let imageContainer = document.getElementById('image-preview');
                let uploadedImage = document.getElementById('uploaded-image');
                if (uploadedImage) {
                    // 如果已经存在图片,则更新图片的属性
                    uploadedImage.setAttribute('src', code);
                    uploadedImage.setAttribute('alt', '');
                    uploadedImage.setAttribute('width', '79');
                    uploadedImage.setAttribute('height', '79');
                } else {
                    // 如果不存在图片,则创建新的图片元素并添加到容器中
                    uploadedImage = document.createElement('img');
                    uploadedImage.setAttribute('id', 'uploaded-image');
                    uploadedImage.setAttribute('src', code);
                    uploadedImage.setAttribute('alt', '');
                    uploadedImage.setAttribute('width', '79');
                    uploadedImage.setAttribute('height', '79');
                    imageContainer.appendChild(uploadedImage);
                }
                console.log(imageContainer);
            },
            error: function(res){
            }
        });
    }

    $("#image-preview").on('click', 'img',function(event) {
        let _this = $(this);//将当前的pimg元素作为_this传入函数
        imgShow("#outerDiv", "#innerDiv", "#bigImg", _this);
    });

    function imgShow(outerDiv, innerDiv, bigImg, _this){
        let src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigImg).attr("src", src);//设置#bigimg元素的src属性

        $("<img/>").attr("src", src).on("load", function() {
            let windowW = $(window).width();//获取当前窗口宽度
            let windowH = $(window).height();//获取当前窗口高度
            let realWidth = this.width;//获取图片真实宽度
            let realHeight = this.height;//获取图片真实高度
            let imgWidth, imgHeight;
            let scale = 0.8;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if(realHeight>windowH*scale) {//判断图片高度
                imgHeight = windowH*scale;//如大于窗口高度,图片高度进行缩放
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW*scale;//再对宽度进行缩放
                }
            } else if(realWidth>windowW*scale) {//如图片高度合适,判断图片宽度
                imgWidth = windowW*scale;//如大于窗口宽度,图片宽度进行缩放
                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求,高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigImg).css("width",imgWidth);//以最终的宽度对图片缩放

            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            $(innerDiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
            $(outerDiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        }).on("error", function() {
            // Error loading image
        });

        $(outerDiv).click(function(){//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>
</html>

四、Servlet完整代码

package com.example.javaweb;

import com.alibaba.fastjson.JSONObject;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import java.io.*;
import java.util.List;
import java.util.UUID;
import javax.servlet.http.*;
import javax.servlet.annotation.*;

@WebServlet(name = "upload", value = "/upload")
public class UploadServlet extends HttpServlet {

    private final int MAX_FILE_SIZE = 1024 * 1024 * 10;

    private final int MAX_MEN_SIZE = 1024 * 1024 * 10;

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) {
        try {
            upload(request,response);
        }catch (Exception e){
            throw new RuntimeException(e);
        }
    }

    public void upload(HttpServletRequest request, HttpServletResponse response) throws Exception {
        //设置对客户端请求进行重新编码为UTF-8,否则会出现乱码
        request.setCharacterEncoding("UTF-8");
        //指定对服务器响应进行重新编码为UFT-8,同时浏览器也是根据这个参数来就行重写编码(又称解码)
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/json;charset=utf-8");
        // 检查是否有一个文件上传请求
        boolean isMultipart = ServletFileUpload.isMultipartContent(request);
        String savePath = "D:\\jsp\\";
        if (!isMultipart) {
            throw new Exception("非文件类型请求");
        }
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // 文件大小的最大值将被存储在内存中
        factory.setSizeThreshold(MAX_MEN_SIZE);
        // 获取项目根目录绝对路径
        String path = getServletContext().getRealPath("");
        // 设置缓存文件的临时存放目录
        factory.setRepository(new File(path + "upload"));
        ServletFileUpload upload = new ServletFileUpload(factory);
        // 允许上传的文件大小的最大值
        upload.setSizeMax(MAX_FILE_SIZE);
        // 解析请求,获取文件项
        List<FileItem> fileItems = upload.parseRequest(request);
        // 处理上传的文件项
        for (FileItem fileItem : fileItems) {
            if (fileItem.isFormField()) {
                System.out.println(fileItem.getFieldName() + " - " + fileItem.getString("UTF-8"));
            }else {
                String fileName = UUID.randomUUID() +getFileType(fileItem.getName());
                String fullPath = savePath+fileName;
                mkdir(fullPath);
                // 写入文件
                File file = new File(fullPath);
                fileItem.write(file);
            }
        }
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("code",200);
        jsonObject.put("msg","上传成功");
        response.getWriter().write(jsonObject.toString());
    }

    /**
     * 获取文件后缀
     * @param fileName
     * @return
     */
    public String getFileType(String fileName){
        int lastIndex = fileName.lastIndexOf(".");
        String fileType = "."+fileName.substring(lastIndex+1);
        return fileType;
    }

    /**
     * 创建目录
     * @param path
     * @throws IOException
     */
    public void mkdir(String path) throws IOException {
        File tempFile = new File(path);
        if(!tempFile.getParentFile().exists()){
            tempFile.getParentFile().mkdirs();//创建父级文件路径
            tempFile.createNewFile();//创建文件
        }
    }

}

五、Gitee源码

Jsp+Servlet实现图片上传和点击放大预览功能

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/613927.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nextcloud私有云盘-重新定义云存储体验

Nextcloud私有云盘-重新定义云存储体验 1. 什么是Nextcloud ​ Nextcloud是一个开源的云存储和协作平台&#xff0c;旨在为个人用户、企业和团队提供安全、隐私保护的数据存储和共享解决方案。它允许您在不同设备之间同步、共享文件&#xff0c;提供了强大的协作工具和应用生…

C++初阶之stack,queue,priority_queue的使用和模拟以及仿函数的创建和使用

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 算法 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 目录 一.stack,queue,priority_queue简介以及代码模拟 1.1 stack …

Java | Leetcode Java题解之第74题搜索二维矩阵

题目&#xff1a; 题解&#xff1a; class Solution {public boolean searchMatrix(int[][] matrix, int target) {int m matrix.length, n matrix[0].length;int low 0, high m * n - 1;while (low < high) {int mid (high - low) / 2 low;int x matrix[mid / n][m…

激光雷达在工厂散料体积测量中的经济效益分析

随着市场竞争的加剧&#xff0c;企业对于成本控制和效率提升的需求越来越迫切。激光雷达作为一种高效、准确的测量工具&#xff0c;在工厂散料体积测量中发挥着重要作用。本文将对激光雷达在工厂散料体积测量中的经济效益进行分析。 一、减少人工成本 传统的散料体积测量方法…

人工智能_大模型049_模型微调009_llama2模型训练_代码分析和实现_代码记录---人工智能工作笔记0184

以上是项目的整体结构,其中上一节我们看了chatglm3目录下,对chatglm3模型的训练部分的代码,然后 这里的llama2目录下是对llama2模型进行训练的代码. 然后web_demo目录是,对web浏览器中,使用chatglm3,以及llama2.py进行的封装下一节我们再看这个部分 E:\2024\人工智能\fine-tun…

Stable Diffusion写真完整教程

前言 最近自己对AI非常痴迷&#xff0c;并且今后也会一直在这个领域深耕&#xff0c;所以就想着先入门&#xff0c;因此花时间研究了一番&#xff0c;还好&#xff0c;出了点小成果&#xff0c;接下来给大家汇报一下。 AI绘画 提到AI绘画&#xff0c;大家可能立马会想到made…

JMeter 如何应用于 WebSocket 接口测试

WebSocket: 实时双向通信的探索及利用 JMeter 进行应用性能测试 WebSocket 是一项使客户端与服务器之间可以进行双向通信的技术&#xff0c;适用于需要实时数据交换的应用。为了衡量和改进其性能&#xff0c;可以通过工具如 JMeter 进行测试&#xff0c;但需要先对其进行适配以…

光栅测长机高精度检定量规量具

在制造业中&#xff0c;量规、量具等精密测量工具的准确性直接影响着产品质量和制造效率。为了确保这些测量工具的精准度&#xff0c;光栅测长机应运而生&#xff0c;成为了检定量规量具的利器。 光栅测长机是一种高精度的长度测量设备&#xff0c;它是利用光栅的精密刻度和光…

微信小程序之简单的发送弹幕操作

大家看视频的时候是不是时不时会有弹幕飘过~ 在我们微信小程序当中&#xff0c;我们可以十分简单的实现&#xff0c;接下来为大家介绍一下吧&#xff01; 我们使用微信官方给我们的一个视频链接 "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey302802…

关于docker network网络

首先,我们来看看Docker默认的网络模式,即docker0网桥。 每当你安装Docker时,它会创建一个名为docker0的虚拟网桥,并设置一个IP地址范围供它进行端口映射等工作。所有Docker容器在创建时,都会自动连接到这个docker0网桥,并分配一个虚拟IP地址。这样,容器与主机之间,以及容器与容…

微信小程序开发【Coffee Shopping】(1)

1.环境准备 微信开发者工具&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 前端常用网站集合&#xff1a;http://www.wwp666.cn/ 微信小程序开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/quicksta…

docker部署minio和业务服务因变更minio密码导致访问不到图片的问题

问题起因 业务application和minio都是docker部署。按部署规则minio的环境变量中设置了MINIO_ROOT_USER和MINIO_ROOT_PASSWORD。这样就可以用这套用户名密码登录minio了。而我的application中是通过api访问minio获取资源URL&#xff0c;提供给前端的。所以在application的环境变…

Excel实用技巧持续学习

1、Excel高效设置图标格式&#xff1a; 2、饼图可以统一设置数据标签在图外面&#xff01;&#xff01; 环形图不可以&#xff0c;但是可以中间手动加上白色圆形&#xff0c;将饼图变为圆环。 可以设置标签的文本显示&#xff1a; 3、饼图和环形图最好进行排序&#xff01;显得…

【Qt 学习笔记】Qt常用控件 | 多元素控件 | Tree Widget的说明及介绍

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 多元素控件 | Tree Widget的说明及介绍 文章编号&#x…

stable diffusion WebUi本地安装

一、stable diffusion 介绍 Stable Diffusion是一种先进的文本到图像的生成模型&#xff0c;它可以根据给定的文本输入生成高度逼真的图像。 Stable Diffusion模型因其高效性和灵活性&#xff0c;在AI图像生成领域引起了广泛关注&#xff0c;并在实际应用中展示了其强大的能力…

MySQL性能优化:MySQL中的隐式转换造成的索引失效

目录 前言数据准备SQL测试分析和总结 前言 数据库优化是一个任重而道远的任务&#xff0c;想要做优化必须深入理解数据库的各种特性。在开发过程中我们经常会遇到一些原因很简单但造成的后果却很严重的疑难杂症&#xff0c;这类问题往往还不容易定位&#xff0c;排查费时费力最…

2024年第九届数维杯大学生数学建模挑战赛B 题思路1.0版本

B题&#xff1a;生物质和煤共热解问题的研究 数维杯分享资料&#xff08;问题一代码论文思路&#xff09;链接&#xff08;18点更新&#xff09;&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1GSv9dkqcY6G-XUnd0sJe_A 提取码&#xff1a;sxjm 题目分析&#xff1…

基于LLM的自行车道CAD

LLM&#xff08;大型语言模型&#xff09;是强大的工具。对于许多人来说&#xff0c;用语言表达愿望通常比浏览复杂的 GUI 更简单。 1、系统简介和环境搭建 urb-x.ch&#xff0c;这是一家专门从事自行车道建设的公司。轨道采用模块化构建块进行独特设计&#xff0c;可以通过多…

有什么实用的还原试卷的app免费?6个软件教你快速进行还原试卷

有什么实用的还原试卷的app免费&#xff1f;6个软件教你快速进行还原试卷 在现代化的教学环境中&#xff0c;使用数字化工具进行试卷还原变得愈发重要。以下是六个实用的、免费的应用程序&#xff0c;它们为还原试卷提供了便捷的解决方案。 FunAI&#xff1a; 这款应用程序可…

QT作业5

1、聊天室 服务器端 //头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> #include <QTcpSocket> #include <QList> #include <QListWidget> #include <QMessageBox> #include <QDebug> #includ…