基于Servlet3的文件上传

简介

基于Servlet3的文件上传
Servlet3将multipart/form-data的POST请求封装成Part,通过Part对上传的文件进行操作。
Servlet3没有提供直接获取文件名的方法,需要从请求头中解析出来请求头的格式:

单个文件上传

<html>
    <head>
        <title>Servlet3单文件上传</title>
    </head>
    <body>
        <!-- 文件上传时必须设置表单的 enctype="multipart/form-data"-->
        <form action="${pageContext.request.contextPath}/singleFileUpload" method="post" enctype="multipart/form-data">
            上传文件:<input type="file" name="file"><br>
            <input type="submit" value="上传">
        </form>
    </body>
</html>

基于JQuery的单文件上传的页面

<html>
    <head>
        <title>$Title$</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            function uploadFile(){
                var formData = new FormData();
                formData.append("file",$("#file")[0].files[0]);
                formData.append("info",'haha');
                $.ajax({
                    url:'${pageContext.request.contextPath}/singleFileUpload', /*接口域名地址*/
                    type:'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success:function(res){//字符串
                		console.log(res);
                		var json = eval('('+res+')');//字符串转JSON
                		console.log(json.data);
            		}
                })
            }
        </script>
    </head>
    <body>
        <input type="file" name="file" id="file">
        <button  onclick="uploadFile()">上传文件</button>
    </body>
</html>

后台代码

@MultipartConfig    //标识Servlet支持文件上传
@WebServlet(urlPatterns = "/singleFileUpload")
public class SingleFileUploadServlet extends HttpServlet {
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        String savePath = request.getServletContext().getRealPath("/uploadFile");  //存储路径
        File path = new File(savePath);
    	if(!path.exists()) { //如果路径不存在则创建
            path.mkdirs();
    	}
    	
        Collection<Part> parts = request.getParts(); //获取上传的文件集合
        if (parts != null && parts.size() == 1) {   //上传单个文件
            Part part = request.getPart("file"); //通过表单file控件(<input type="file" name="file">)的名字直接获取Part对象
            String header = part.getHeader("content-disposition");//获取请求头
            String fileName = getFileName(header); //获取文件名
            part.write(savePath + File.separator + fileName);           //把文件写到指定路径
        }
        PrintWriter out = response.getWriter();
        out.println("上传成功");
        out.flush();
        out.close();
    }
    /**
     * 根据请求头解析出文件名
     * @param header 请求头
     * @return 文件名
     */
    public String getFileName(String header) {
        String[] temp = header.split(";")[2].split("=");
        //获取文件名,兼容各种浏览器的写法
        String fileName = temp[1].substring(temp[1].lastIndexOf("\\") + 1).replaceAll("\"", "");
        return fileName;
    }

}

多个文件上传

<html>
    <head>
        <title>Servlet3多文件上传</title>
    </head>
    <body>
        <!-- 文件上传时必须要设置表单的enctype="multipart/form-data"-->
        <form action="${pageContext.request.contextPath}/multiFileUpload" method="post" enctype="multipart/form-data">
            上传文件:<input type="file" name="file1"><br>
            上传文件:<input type="file" name="file2"><br>
            <input type="submit" value="上传">
        </form>
    </body>
</html>

后台代码

@MultipartConfig//标识Servlet支持文件上传
//使用@WebServlet配置UploadServlet的访问路径
@WebServlet(urlPatterns = "/multiFileUpload")
public class MultiFileUploadServlet extends HttpServlet {
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //存储路径
        String savePath = request.getServletContext().getRealPath("/uploadFile");
        File path = new File(savePath);
        if(!path.exists()) {
            path.mkdirs();
        }
        Collection<Part> parts = request.getParts();        //获取上传的文件集合
        if (parts != null && parts.size() > 1) { //一次性上传多个文件
            for (Part part : parts) {//循环处理上传的文件
                String header = part.getHeader("content-disposition");//获取请求头
                //获取文件名
                String fileName = getFileName(header);
                //把文件写到指定路径
                part.write(savePath + File.separator + fileName);
            }
            PrintWriter out = response.getWriter();
            out.println("上传成功");
            out.flush();
            out.close();
        }
    }
    /**
     * 根据请求头解析出文件名
     * @param header 请求头
     * @return 文件名
     */
    public String getFileName(String header) {
        String[] temp = header.split(";")[2].split("=");
        //获取文件名,兼容各种浏览器的写法
        String fileName = temp[1].substring(temp[1].lastIndexOf("\\") + 1).replaceAll("\"", "");
        return fileName;
    }

}

任意多个文件上传


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态添加文件上传列表</title>
    <script type="text/javascript">
        function addFile(event) {
            //创建一个div标签,用以包含一个input标签和删除按钮
            var innerdiv = document.createElement("div");

            //创建一个input标签
            var inputNode = document.createElement("input");
            inputNode.name = "fileName";
            inputNode.type = "file";

            //创建一个删除按钮
            var delNode = document.createElement("input");
            delNode.name = "del";
            delNode.type = "button";
            delNode.value = "删除";

            //删除当前删除按钮所在的标签,为此按钮点击事件创建一个处理函数
            delNode.onclick = function d() {
                this.parentNode.parentNode.removeChild(this.parentNode); //删除此div区域
                var fileNodes = document.getElementsByName("fileName");
            };

            innerdiv.appendChild(inputNode);
            innerdiv.appendChild(delNode);

            var div = document.getElementById("file");
            div.appendChild(innerdiv);
        }
    </script>
</head>
<body>
<form id="upload" action="${pageContext.request.contextPath }/fileUpload" enctype="multipart/form-data" method="post">
    上传文件:<input type="button" value="添加文件" onclick="addFile(this.parentNode)"/> <br/>
    <div id="file"></div>
    <input type="submit" value="上传"/>
</form>
</body>
</html>

后台代码

@MultipartConfig//标识Servlet支持文件上传
//使用@WebServlet配置UploadServlet的访问路径
@WebServlet(urlPatterns = "/fileUpload")
public class FileUploadServlet extends HttpServlet {
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //存储路径
        String savePath = request.getServletContext().getRealPath("/uploadFile");
        File path = new File(savePath);
        if(!path.exists()) {
            path.mkdirs();
        }
        //获取上传的文件集合
        Collection<Part> parts = request.getParts();
        if (parts.size() == 1) {//一次上传单个文件
            Part part = request.getPart("fileName");//通过表单file控件(<input type="file" name="file">)的名字直接获取Part对象
            String header = part.getHeader("content-disposition"); //获取请求头
            String fileName = getFileName(header);     //获取文件名
            part.write(savePath + File.separator + fileName);    //把文件写到指定路径
        } else {  //一次性上传多个文件
            for (Part part : parts) {//循环处理上传的文件
                //获取请求头,请求头的格式:form-data; name="file"; filename="snmp4j--api.zip"
                String header = part.getHeader("content-disposition");
                //获取文件名
                String fileName = getFileName(header);
                //把文件写到指定路径
                part.write(savePath + File.separator + fileName);
            }
        }
        PrintWriter out = response.getWriter();
        out.println("上传成功");
        out.flush();
        out.close();
    }

    /**
     * 根据请求头解析出文件名
     * @param header 请求头
     * @return 文件名
     */
    public String getFileName(String header) {
        String[] temp = header.split(";")[2].split("=");
        //获取文件名,兼容各种浏览器的写法
        String fileName = temp[1].substring(temp[1].lastIndexOf("\\") + 1).replaceAll("\"", "");
        return fileName;
    }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缘不易

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值