Servlet 通过表单上传文件和获取表单数据的最简单方式

xiaoxiao2021-02-28  75

注意:本文所描述的方法需要Servlet 3.0 及以上版本的支持。

一、服务器端Servlet代码:

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.IOException; @WebServlet(name = "UploadTestServlet",urlPatterns = {"/upload"}) //下面的注解中location的值为上传的文件的临时存放位置 @MultipartConfig(location = "D://uploadtest") public class UploadTestServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println(request.getParameter("uploaderName")); Part part=request.getPart("file"); //通过表单中的name属性获取表单域中的文件 part.write("D://uploadtest//aaa.txt"); //将文件移动到特定的磁盘路径 String fname=part.getSubmittedFileName(); System.out.println("文件名:"+fname); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }

二、浏览器端HTML代码

版本1、普通表单提交

<html> <head> <title>上传页</title> </head> <body> <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload"> <input id="file" type="file" name="file"/> <input name="uploaderName" type="text"/> <input type="submit" value="提交"/> </form> </body> </html>

版本2、AJAX异步提交表单

<html> <head> <script type="application/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <title>Title</title> </head> <body> <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload"> <input id="file" type="file" name="file"/> <input name="uploaderName" type="text"/> <button id="upload" value="提交" type="button" onclick="fun();">upload</button> </form> <script type="application/javascript"> function fun() { $.ajax({ url: '/upload', type: 'POST', cache: false, data: new FormData($('#uploadForm')[0]), processData: false, contentType: false }).done(function(res) { }).fail(function(res) {}); } </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-32643.html

最新回复(0)