jsp中实现上传图片即时显示效果功能

要在JSP中实现上传图片即时显示效果的功能，可以采用以下步骤：

在JSP页面中添加上传文件表单和图片预览区域

<form action="upload.jsp" method="post" enctype="multipart/form-data">
  <input type="file" name="file" onchange="previewImage(this)">
  <div id="preview"></div>
  <input type="submit" value="上传">
</form>

其中，previewImage函数为JavaScript代码，用于将选中的图片实现即时预览效果，preview为显示预览区域的HTML元素。

在上传JSP页面中获取上传文件并保存到服务器

<%@ page import="java.io.*,java.util.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
String savePath = "upload/"; // 保存文件的路径
File fileSavePath = new File(savePath);
if (!fileSavePath.exists()) {
  fileSavePath.mkdir(); // 如果不存在该目录则创建
}

String imageName = ""; // 保存图片名称
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
  FileItem item = (FileItem) iter.next();
  if (!item.isFormField()) {
    String fileName = item.getName(); // 获取文件名
    fileName = fileName.substring(fileName.lastIndexOf("\\") + 1); // 截取文件名
    imageName = fileName;
    String filePath = savePath + fileName; // 保存的文件路径
    File uploadedFile = new File(filePath);
    item.write(uploadedFile); // 将文件保存到服务器
  }
}
%>

在上传JSP页面中输出上传成功信息及预览图片

<%
if (!imageName.equals("")) {
  out.println("上传成功！");
  out.println("<img src='" + savePath + imageName + "'/>"); // 输出预览图片
}
%>

其中，savePath为保存上传文件的路径，imageName为上传文件的名称。

示例1：上传图片保存到指定路径，并实现即时预览效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Upload and Preview Image</title>
  <script>
    function previewImage(file) {
      var preview = document.getElementById('preview');
      var reader = new FileReader();
      reader.onload = function (e) {
        var img = new Image();
        img.src = e.target.result;
        img.className = 'preview-img';
        preview.appendChild(img);
      }
      reader.readAsDataURL(file.files[0]);
    }
  </script>
  <style>
    .preview-img {
      max-width: 200px;
      max-height: 200px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <form action="upload.jsp" method="post" enctype="multipart/form-data">
    <input type="file" name="file" onchange="previewImage(this)">
    <div id="preview"></div>
    <input type="submit" value="上传">
  </form>
</body>
</html>

<%@ page import="java.io.*,java.util.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
String savePath = "upload/"; // 保存文件的路径
File fileSavePath = new File(savePath);
if (!fileSavePath.exists()) {
  fileSavePath.mkdir(); // 如果不存在该目录则创建
}

String imageName = ""; // 保存图片名称
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
  FileItem item = (FileItem) iter.next();
  if (!item.isFormField()) {
    String fileName = item.getName(); // 获取文件名
    fileName = fileName.substring(fileName.lastIndexOf("\\") + 1); // 截取文件名
    imageName = fileName;
    String filePath = savePath + fileName; // 保存的文件路径
    File uploadedFile = new File(filePath);
    item.write(uploadedFile); // 将文件保存到服务器
  }
}
%>

<%
if (!imageName.equals("")) {
  out.println("上传成功！");
  out.println("<img src='" + savePath + imageName + "'/>"); // 输出预览图片
}
%>

示例2：上传图片并保存到MySQL数据库，实现即时预览效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Upload and Preview Image</title>
  <script>
    function previewImage(file) {
      var preview = document.getElementById('preview');
      var reader = new FileReader();
      reader.onload = function (e) {
        var img = new Image();
        img.src = e.target.result;
        img.className = 'preview-img';
        preview.appendChild(img);
      }
      reader.readAsDataURL(file.files[0]);
    }
  </script>
  <style>
    .preview-img {
      max-width: 200px;
      max-height: 200px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <form action="upload.jsp" method="post" enctype="multipart/form-data">
    <input type="file" name="file" onchange="previewImage(this)">
    <div id="preview"></div>
    <input type="submit" value="上传">
  </form>
</body>
</html>

<%@ page import="java.io.*,java.util.*,java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.mysql.cj.jdbc.Driver" %>

<%
String savePath = "upload/"; // 保存文件的路径
File fileSavePath = new File(savePath);
if (!fileSavePath.exists()) {
  fileSavePath.mkdir(); // 如果不存在该目录则创建
}

String imageName = ""; // 保存图片名称
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
  FileItem item = (FileItem) iter.next();
  if (!item.isFormField()) {
    String fileName = item.getName(); // 获取文件名
    fileName = fileName.substring(fileName.lastIndexOf("\\") + 1); // 截取文件名
    imageName = fileName;
    String filePath = savePath + fileName; // 保存的文件路径
    File uploadedFile = new File(filePath);
    item.write(uploadedFile); // 将文件保存到服务器

    // 将图片保存到MySQL数据库
    String url = "jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Shanghai&useSSL=false";
    String user = "root";
    String password = "root";
    Connection conn = null;
    PreparedStatement ps = null;
    try {
      Class.forName("com.mysql.cj.jdbc.Driver");
      conn = DriverManager.getConnection(url, user, password);
      String sql = "INSERT INTO images (name, content) VALUES (?, ?)";
      ps = conn.prepareStatement(sql);
      ps.setString(1, imageName);
      ps.setBinaryStream(2, new FileInputStream(uploadedFile), uploadedFile.length());
      ps.executeUpdate();
    } catch (Exception e) {
      e.printStackTrace();
    } finally {
      try {
        if (ps != null) {
          ps.close();
        }
        if (conn != null) {
          conn.close();
        }
      } catch (SQLException e) {
        e.printStackTrace();
      }
    }
  }
}
%>

<%
if (!imageName.equals("")) {
  out.println("上传成功！");
  // 从MySQL数据库中获取图片数据并输出预览图片
  String url = "jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Shanghai&useSSL=false";
  String user = "root";
  String password = "root";
  Connection conn = null;
  PreparedStatement ps = null;
  ResultSet rs = null;
  try {
    Class.forName("com.mysql.cj.jdbc.Driver");
    conn = DriverManager.getConnection(url, user, password);
    String sql = "SELECT * FROM images WHERE name=?";
    ps = conn.prepareStatement(sql);
    ps.setString(1, imageName);
    rs = ps.executeQuery();
    if (rs.next()) {
      Blob blob = rs.getBlob("content");
      byte[] bytes = blob.getBytes(1, (int) blob.length());
      out.println("<img src='data:image/png;base64," + encodeToStr(bytes) + "'/>"); // 输出预览图片
    }
  } catch (Exception e) {
    e.printStackTrace();
  } finally {
    try {
      if (rs != null) {
        rs.close();
      }
      if (ps != null) {
        ps.close();
      }
      if (conn != null) {
        conn.close();
      }
    } catch (SQLException e) {
      e.printStackTrace();
    }
  }
}

// 将字节数组转换成Base64编码字符串
private String encodeToStr(byte[] bytes) {
  return new sun.misc.BASE64Encoder().encode(bytes);
}
%>

说明：示例2中通过将图片数据保存到MySQL数据库中来实现上传和预览。首先需要创建名为images的表，并添加name和content两个字段。name保存图片名称，content保存图片数据。在JSP中保存图片数据时，使用ps.setBinaryStream方法将文件数据插入到content字段中；在从数据库中获取预览图片时，使用rs.getBlob方法获取content字段的数据，然后将其转换成Base64编码字符串，再将其设置为图片的src属性值。由于使用了MySQL的JDBC驱动包，所以需要在JSP页面中导入com.mysql.cj.jdbc.Driver类。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jsp中实现上传图片即时显示效果功能 - Python技术站

jsp中实现上传图片即时显示效果功能

相关文章