Java编程之如何通过JSP实现头像自定义上传

下面是详细讲解关于Java编程如何通过JSP实现头像自定义上传的完整攻略。

简介

在现代社交网络和互联网应用程序中，用户的头像很重要。头像可以为应用程序的用户界面和用户个人信息提供额外的信息。本文将讨论如何利用Java编程语言和JSP技术实现头像自定义上传。本文将具体介绍如何实现头像上传到服务器和生成预览图像。我们还将使用jQuery库向服务器发送Ajax请求并返回JSON响应来实现异步头像上传。

实现步骤

步骤1：创建表单

开发者需要在网页上展示一个表单来让用户上传头像。使用HTML表单标记创建一个表单元素。通过 enctype 属性将表单设置为 multipart/form-data，表示用户上传文件。表单还需要一个形似“choose file”的按钮，让用户在上传头像之前可以找到他们在计算机上保存的图像文件。

示例代码：

<form enctype="multipart/form-data" method="post" action="upload_avatar.jsp">
    <input type="file" name="avatar">
    <input type="submit" value="Upload">
</form>

步骤2：上传头像

在此步骤中，开发者需要在网站的服务器端和用户的本地计算机之间建立一个文件上传机制。在本例中，可以使用Apache Commons FileUpload和Servlet插件将文件上传到服务器上。以下是upload_avatar.jsp页面的代码：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="java.io.*,org.apache.commons.fileupload.*,org.apache.commons.fileupload.disk.*,
org.apache.commons.fileupload.servlet.*"%> 

<%
 boolean isMultipart = ServletFileUpload.isMultipartContent(request);
 if (!isMultipart) {
    // 不是 multipart/form-data 请求
    response.sendError(HttpServletResponse.SC_BAD_REQUEST);
    return;
 }

 // 设置上传文件的字节数限制
 DiskFileItemFactory factory = new DiskFileItemFactory();
 factory.setSizeThreshold(4096);
 ServletFileUpload upload = new ServletFileUpload(factory);
 upload.setSizeMax(1048576); // 设置上传文件的大小限制为1MB
 File uploadedFile = null;

 try {
    List<FileItem> items = upload.parseRequest(request);
    Iterator<FileItem> iter = items.iterator();
    while (iter.hasNext()) {
        FileItem item = iter.next();
        if (!item.isFormField()) { // 是上传的文件
            String fieldName = item.getFieldName();
            String fileName = item.getName();
            String contentType = item.getContentType();
            long sizeInBytes = item.getSize();

            // 为上传的文件创建一个唯一的文件名
            String extension = fileName.substring(fileName.lastIndexOf("."));
            String newFileName = String.format("%d%s", System.currentTimeMillis(), extension);

            // 将上传的文件保存到服务器端
            File uploads = new File(getServletContext().getRealPath("/uploads"));
            uploadedFile = new File(uploads, newFileName);
            item.write(uploadedFile);//将文件写入本地磁盘
        } else { // 不是上传的文件（字段名称/值对）
            String fieldName = item.getFieldName();
            String fieldValue = item.getString();
        }
    }
 } catch (Exception e) {
    e.printStackTrace(out);
 }
%>

步骤3：生成头像缩略图

接下来，我们将采用Java的图像处理核心API（ImageIO），通过解码文件、改变尺寸和编码过程来生成头像缩略图。

示例代码：

<%
if (uploadedFile != null) {
    // 创建头像缩略图
    String extension = uploadedFile.getName().substring(uploadedFile.getName().lastIndexOf("."));
    String filename = uploadedFile.getName().replace(extension, "");
    String thumbnailName = filename + "-thumbnail" + extension;
    File uploads = new File(getServletContext().getRealPath("/uploads"));
    File thumbnailFile = new File(uploads, thumbnailName);
    BufferedImage img = ImageIO.read(uploadedFile);
    double scale = Math.min(100.0 / img.getWidth(), 100.0 / img.getHeight());//缩略图的尺寸
    int w = (int)(scale * img.getWidth());
    int h = (int)(scale * img.getHeight());
    Image thumbnail = img.getScaledInstance(w, h, Image.SCALE_SMOOTH);
    BufferedImage bufferedThumbnail = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);   
    Graphics2D graphics2D = bufferedThumbnail.createGraphics();
    graphics2D.drawImage(thumbnail, 0, 0, null);
    graphics2D.dispose();
    ImageIO.write(bufferedThumbnail, "jpg", thumbnailFile);//将缩略图写入本地磁盘
}
%>

步骤4：处理为异步上传

一旦用户上传了头像文件，我们将派遣一个异步任务。这个任务将保存文件并为这个头像生成缩略图。同时，我们还将向浏览器发送一个JSON响应，告知浏览器头像上传成功。

示例代码：

<%
if (uploadedFile != null) {
    String extension = uploadedFile.getName().substring(uploadedFile.getName().lastIndexOf("."));
    String filename = uploadedFile.getName().replace(extension, "");
    String thumbnailName = filename + "-thumbnail" + extension;
    String avatarUrl = "/uploads/" + uploadedFile.getName();
    String thumbnailUrl = "/uploads/" + thumbnailName;

    // 创建异步响应对象
    response.setContentType("application/json");
    response.setHeader("Cache-Control", "no-cache");
    JSONObject json = new JSONObject();
    json.put("avatarUrl", avatarUrl);
    json.put("thumbnailUrl", thumbnailUrl);
    PrintWriter out = response.getWriter();
    out.print(json.toString());
    out.flush();
}
%>

步骤5：添加 Ajax 代码

为了在用户上传头像时不刷新整个页面，我们将使用jQuery库向服务器发送异步请求来上传文件。以下是一个示例代码，使用Ajax请求来让浏览器使用avatarUrl和thumbnailUrl确定到其他地方显示这个新头像。

$(document).ready(function() {
     $('#myForm').submit(function() {        
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: '/upload_avatar.jsp',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                var data = jQuery.parseJSON(returndata);
                $('#avatar-image').attr('src', data.avatarUrl);
                $('#avatar-thumbnail').attr('src', data.thumbnailUrl);
                $('#myForm').find("input[type='file']").val("");
            }
        });
        return false;
    });
});

总结

本文介绍了如何通过Java编程语言和JSP技术实现了头像自定义上传。本文提供了详细的代码和示例来展示如何上传文件、创建缩略图和响应浏览器。本文还展示了如何使用jQuery库来创建异步头像上传，并用JavaScript代码确保新头像可供浏览器在上传后立即查看。