18.实现网站上选择本地图片并上传至服务器

2022-08-09 本文已影响0人一直流浪

功能介绍：

本地选择照片上传至服务器。

需要引入的 jar 文件：commons-fileupload-1.3.2、commons-io-2.5.jar。

下载链接：

commons-fileupload.x.x.jar 文件：http://commons.apache.org/proper/commons-fileupload/
commons-io-x.x.jar 文件： http://commons.apache.org/proper/commons-io/ 下载。

将下载好的jar包复制到项目/WebContent/WEB-INF/lib 文件夹下：

实现代码：

fileUpload2.jsp:图片上传的界面页

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="../css/fileUpload2.css" />
</head>
<body >
<form action="/JavaEE17ToolDemo/file-upload-servlet" method="post" enctype="multipart/form-data">
<img alt="" id="img1" src="" style="height:300px;width: 200px">
<a class="a-upload">
  <input type="file" name="file" id="fileField" onchange="document.getElementById('img1').src=document.getElementById('fileField').value">点击这里上传文件
</a>
<br/>
    <input type="submit" value="上传">
</form>
</body>
</html>

fileUpload2.css： css文件

@charset "UTF-8";

body{
    background-color: skyblue;
}

#img1{
    background-color: white;
}

.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

#img1{
    width:100px;
    height:100px;
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

FileUploadServlet.java:文件上传处理

package com.company.project.servlet.fileupload;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

@WebServlet("/file-upload-servlet")
public class FileUploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    // 文件上传的存储路径
    private static final String SAVE_PATH = "imag";

    // 上传配置
    // 配置内存临界值
    private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB
    // 配置最大文件大小
    private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB
    // 配置请求大小
    private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB

    public FileUploadServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 检测是否为多媒体文件
        if (!ServletFileUpload.isMultipartContent(request)) {
            // 如果不是则停止
            PrintWriter out = response.getWriter();
            out.println("表单必须包含 enctype=multipart/form-data");
            out.flush();
            out.close();
            return;
        }

        // 配置上传参数
        DiskFileItemFactory factory = new DiskFileItemFactory();

        // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
        factory.setSizeThreshold(MEMORY_THRESHOLD);

        ServletFileUpload upload = new ServletFileUpload(factory);

        // 设置上传文件最大值
        upload.setFileSizeMax(MAX_FILE_SIZE);

        // 设置最大请求值(包含文件和表单数据)
        upload.setSizeMax(MAX_REQUEST_SIZE);

        // 中文处理
        upload.setHeaderEncoding("UTF-8");

        // 创建保存路径
        String uploadPath = request.getServletContext().getRealPath("./") + File.separator + SAVE_PATH;

        // 如果路径不存在则创建
        File uploadDir = new File(uploadPath);
        if (!uploadDir.exists()) {
            uploadDir.mkdir();
        }

        try {
            @SuppressWarnings("unchecked")
            List<FileItem> formItems = upload.parseRequest(request);
            if (formItems != null && formItems.size() > 0) {
                //迭代表单数据
                for (FileItem fileItem : formItems) {
                    //处理不在表单的字段
                    if(!fileItem.isFormField()) {
                        String fileName = new File(fileItem.getName()).getName();
                        String filePath = uploadPath + File.separator + fileName;
                        File storeFile = new File(filePath);
                        // 在控制台输出文件的上传路径
                        System.out.println(filePath);
                        // 保存文件到硬盘
                        fileItem.write(storeFile);
                        request.setAttribute("message",
                            "文件上传成功!");
                    }
                }
            }

        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (Exception e) {
            request.setAttribute("message",
                    "错误信息: " + e.getMessage());
        }

        //文件上传完成跳转
        request.getServletContext().getRequestDispatcher("/page/UploadMes.jsp").forward(request, response);
    }
}

UploadMes.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>
<center>
    <h2>${message }</h2>
</center>

</body>
</html>

效果图:

18.实现网站上选择本地图片并上传至服务器

功能介绍：

实现代码：

猜你喜欢

热点阅读