ke9案例三:页面提交文件,我服务器端接收

案例三:页面提交文件,我服务器端接收

ProcessFile.java

1value = "/process-file"

2获取邮件消息的所有部分part--Collection<Part> parts=request.getParts();

3遍历每一个part

4之后可以打印头文件等String header=part.getHeader("content-disposition");

5打印文件名String fileName=header.substring(header.lastIndexOf("=")+2,header.lastIndexOf("\""));

6 ServletContext context =request.getServletContext();:获取ServletContext对象,用于获取服务器的上下文。

7 String savePath=context.getRealPath("/file");:获取服务器上 "/file" 的实际路径。物理地址

8 savePath += File.separator+fileName;:在路径中添加文件名。window的是反斜杠,File调用seoarator

9part.write(savePath);写到路径

part也有这个Header方法

不知道我们的文本放在哪里的??part.write(savePath);??怎么写进去

运行后就会文件放在我们的

java 复制代码
package com.example.H5ke8demo;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.sql.Connection;
import java.util.Collection;

@WebServlet(name = "ProcessFile", value = "/process-file")
@MultipartConfig
public class ProcessFile extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Collection<Part> parts=request.getParts();
        for(Part part:parts){
//            System.out.println("\n");
            String header=part.getHeader("content-disposition");
//            System.out.println(header);
//            System.out.println(part.getContentType());
//            System.out.println(part.getSize());
//            System.out.println(part.getName());

            String fileName=header.substring(header.lastIndexOf("=")+2,header.lastIndexOf("\""));
//            System.out.println(fileName);
            ServletContext context =request.getServletContext();
            String savePath=context.getRealPath("/file");
            savePath += File.separator+fileName;
//            System.out.println(savePath);
            part.write(savePath);//写入文件
        }



    }

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

    }
}

uploadfile.html

1inpput的file 设置multiple可以选多个文件

2创建一个FormData对象,这个就是表单对像一样的------表单是同步的我的FormData异步

3怎么模拟表单,加入键值对: 通过field.files返回长度---------file_field.files.length

append加的相当于 name,值--键值--------formDate.append

fetch发送给process-file

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>上传文件3</title>
    </head>
    <body>
<input type="file" multiple>
        <input type="button" value="上传" id="upload-btn">

        <script>
            let btn=document.querySelector("#upload-btn");
            let file_field=document.querySelector("input[type=file]");//1放到表单里的
            btn.addEventListener("click",(event)=>{
                let formDate=new FormData();
                for(let i=0;i<file_field.files.length;i++){
                    formDate.append("file"+(i+1),file_field.files[i]);//2文件数量
                }
                fetch("process-file",{
                    method:"post",
                    body:formDate
                })
                .then(response=>alert(response.status));
            })
        </script>
    </body>
</html>

注意:

加上Multiparconfig注释才能接收文件

老师的问题他的webapp的file没有文件,加一个文件就行了''

html都要在webapp下

问题:

怎么知道这个物理路径是什么,默认快照里面

还有.then为什么不是两个

传文件作为网盘使用

相关推荐
coderYYY7 分钟前
element树结构el-tree,默认选中当前setCurrentKey无效
前端·javascript·vue.js
GISer_Jing37 分钟前
[总结篇]个人网站
前端·javascript
疯狂的沙粒1 小时前
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
前端·uni-app·html
小妖6661 小时前
html 滚动条滚动过快会留下边框线
前端·html
heroboyluck1 小时前
Svelte 核心语法详解:Vue/React 开发者如何快速上手?
前端·svelte
海的诗篇_1 小时前
前端开发面试题总结-JavaScript篇(二)
开发语言·前端·javascript·typescript
琹箐1 小时前
ant-design4.xx实现数字输入框; 某些输入法数字需要连续输入两次才显示
前端·javascript·anti-design-vue
程序员-小李1 小时前
VuePress完美整合Toast消息提示
前端·javascript·vue.js
Uyker2 小时前
从零开始制作小程序简单概述
前端·微信小程序·小程序
EndingCoder6 小时前
React从基础入门到高级实战:React 实战项目 - 项目三:实时聊天应用
前端·react.js·架构·前端框架