XMLHttpRequest 异步请求servlet 上传文件并且带有参数

XMLHttpRequest 可以异步请求servlet,在请求servlet的时候可以带有参数和上传文件,下面我们直接来看代码:

下面在页面中定义了两个文本标签和一个文件上传的标签

javascript 复制代码
  <input type="text" id="username" />
  <input type="text" id="password" />
  <input type="file" id="myfile"> 
  <button onclick="doLogin()">登录</button>
  <script type="text/javascript">
       function doLogin(){
           const xhr=new XMLHttpRequest();
           xhr.open("post","./fileservlet",true)
           let formData=new FormData();
           let username=document.getElementById("username").value;
           let password=document.getElementById("password").value;
           let obj=document.getElementById("myfile");
           formData.append("username",username);
           formData.append("password",password);
           formData.append("myfiles",obj.files[0]);
           xhr.send(formData);
           xhr.onreadystatechange=function(){

        	  console.log(xhr.readyState)

           }
       }
  </script>

接下来看fileServlet 的处理,如何同步接收文件和参数

java 复制代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Collection<Part> parts = request.getParts();
        for (Part part : parts) {
            String name = part.getName();
            if (part.getSubmittedFileName() == null) {
                // 这是一个普通字段
                String value =getValue(part);
                System.out.println("Field " + name + ": " + value);
            } else {
                // 这是一个文件字段
                String fileName = part.getSubmittedFileName();
                String contentType = part.getContentType();
                long size = part.getSize();
                System.out.println(fileName);
                
                // ... 处理文件上传
                 part.write(path + fileName); 
                 part.delete();
            }
        }
	}
	  // 一个辅助方法,用于从 Part 中读取字符串值
    private String getValue(Part part) throws IOException {
        // 通过 part.getInputStream() 读取输入流,然后转换为字符串
        // 这里是一个简化的示例,实际使用时可能需要处理编码
        return new String(part.getInputStream().readAllBytes(), "UTF-8");
    }

通过判断文件的名字来判断是普通的参数还是文件

利用servlet3.0+ 的part 方式来获取参数和文件

希望对你有所帮助

相关推荐
Elieal2 天前
AJAX 知识
前端·ajax·okhttp
Live&&learn3 天前
Tomcat 10和Tomcat 9引入servlet的不同
java·servlet·tomcat
songx_993 天前
idea建有servlet类的web项目
java·servlet·intellij-idea
好好研究3 天前
JAVAEE知识整理之AJAX、JSON
ajax·java-ee·json·1024程序员节
chilavert3184 天前
技术演进中的开发沉思-146 java-servlet:Servlet 在云原生时代的适配”
服务器·servlet·云原生
小白学大数据5 天前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
瓜瓜怪兽亚5 天前
前端基础知识---Ajax
前端·javascript·ajax
JH30735 天前
解锁Servlet核心:深入剖析HttpServletRequest与HttpServletResponse
servlet
vx Biye_Design6 天前
servlet宠物医院管理系统-计算机毕业设计源码77418
java·vue.js·spring·servlet·eclipse·mybatis
吴鹰飞侠7 天前
AJAX的学习
前端·学习·ajax