servlet实现图片上传功能-Java开发

下面我来为你讲解如何使用servlet实现图片上传功能的完整攻略。

下面我来为你讲解如何使用servlet实现图片上传功能的完整攻略。

1. 准备工作

首先，我们需要在web项目中添加commons-fileupload和commons-io两个jar包。这两个包是实现文件上传必不可少的工具包，它们可以在apache的官网上下载到。

2. 自定义servlet

我们需要自定义一个servlet来实现上传图片的功能，具体实现就是在servlet中处理上传的文件。下面是一个示例：

@WebServlet("/upload")
@MultipartConfig // 表示该servlet支持文件上传
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取上传的文件
        Part part = request.getPart("file");
        // 获取文件名
        String fileName = getFileName(part);
        // 拼接文件存储的路径
        String filePath = request.getServletContext().getRealPath("/upload") + "/" + fileName;
        // 将文件写入服务器
        part.write(filePath);
        // 将上传成功的信息返回给客户端
        response.getWriter().write("Upload success: " + fileName);
    }

    /**
     * 获取上传文件的文件名
     */
    private String getFileName(Part part) {
        // 获取Content-Disposition中的文件名
        String content = part.getHeader("Content-Disposition");
        String[] arr = content.split(";");
        for (String str : arr) {
            if (str.trim().startsWith("filename")) {
                // 去除文件名前后的引号
                return str.substring(str.indexOf("=")+2, str.length()-1);
            }
        }
        // 如果Content-Disposition中没有filename参数，则从part中提取文件名
        return part.getName();
    }
}

在上述代码中，我们首先使用@ServletMapping注解将servlet映射到/upload路径上。然后使用@MultipartConfig注解表示该servlet支持文件上传。在doPost方法中，首先通过request.getPart方法获取上传的文件，然后通过getFileName方法获取文件名，然后将文件写入到服务器上，最后返回上传成功的信息给客户端。

需要注意的是，本示例中的getFileName方法是从Content-Disposition中提取文件名，如果Content-Disposition中没有filename参数，则从part中提取文件名。这是为了兼容不同浏览器的不同上传方式而设计的。

3. 前端页面

最后，我们需要在前端页面中添加一个文件上传的表单，并把上传结果显示在页面上。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传示例</title>
</head>
<body>
    <form action="upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="submit">上传</button>
    </form>
    <p id="result"></p>
    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'upload');
            xhr.onload = function() {
                document.querySelector('#result').textContent = xhr.responseText;
            }
            var formData = new FormData(document.querySelector('form'));
            xhr.send(formData);
        });
    </script>
</body>
</html>