必须是h5和js P3 .0版本的。因为用到的是 新属性 ，比如获取file对象，后台得到part对象等。
前台jsp
<%@ page language="java" contentTy PE ="text/ht ML ; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html P ub LIC "-//W3C//DTD HTML 4.01 Trans IT ional//EN" "https://www.w3. org /TR/html4/loose.dtd"> <html> <head> < ;m eta http-equiv="Content -t ype" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src=" jq uery-3.2.1.min.js"></script> </head> <body> <p> n am e:<input type="text" id="name"/> 文件：<input type="file" id="file"/> < br > <button id=" BT u" onclick="btu()">提交</button> </p> </body> <script> function btu(){ VAR name=$(" # name").val(); var file=$("#file")[0].files[0];//新特性，获取文件对象 var fordata=new FormData();//新特性，得到formData对象，把获取的值扔进去，相当于map fordata.append("name",name); fordata.append("file",file); console. LOG (file) $.ajax({ url:"/war-2/UpdataFile", data:fordata, cache:false, PR oce SSD ata:false, //必须写 contentType:false, //必须写 type:"post", success:function(data){ } }) } </script> </html> 后台java
package u p; import java.io.File; import java.io.IOException; import java.util.Collection; import javax.servlet.ServletException; import javax.servlet.annotation.Multipart config ; 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; /** * Servlet implementation class UpdataFile */ @MultipartConfig(location="E:/") @WebServlet("/UpdataFile") public class UpdataFile extends HttpServlet { private stat ic final long serialVersionUID = 1L; private File file; protected void doGet(HttpServletRequest request, HttpServletResponse response) t hr ows ServletException, IOException { // TODO Auto-generated method stub Sys tem.out.println("1111111111"); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //得到part对象，这个对象有write的方法，直接写到 指定位置 。但是千万别忘了写@MultipartConfig(location="E:/")注解，不指定位置默认是写到注解指定的位置。 Part part = request.getPart("file"); //普通的字段可以采用常规的getparamter的方法得到。 System.out.println(new String(request.getParameter("name").getBytes("iso-8859-1"),"utf-8")); System.out.println(part.getName()); System.out.println(part.getHeader("Content-Disposition")); System.out.println(part.getSize()); String fileName = getFileName From Part(part); part.write(fileName); } //截取文件名 public String getFileNameF rom Part(Part part) { String header = part.getHeader("Content-Disposition"); String fileName = header.substring(header.indexOf("filename=/"")+10, header.lastIndexOf("/"")); return fileName; } } 亲测有效。有不懂的可以留言
必须是h5和jsp3.0版本的。因为用到的是新属性，比如获取file对象，后台得到part对象等。
前台jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> </head> <body> <p> name:<input type="text" id="name"/> 文件：<input type="file" id="file"/> <br> <button id="btu" onclick="btu()">提交</button> </p> </body> <script> function btu(){ var name=$("#name").val(); var file=$("#file")[0].files[0];//新特性，获取文件对象 var fordata=new FormData();//新特性，得到formData对象，把获取的值扔进去，相当于map fordata.append("name",name); fordata.append("file",file); console.log(file) $.ajax({ url:"/war-2/UpdataFile", data:fordata, cache:false, processData:false, //必须写 contentType:false, //必须写 type:"post", success:function(data){ } }) } </script> </html> 后台java
package up; import java.io.File; import java.io.IOException; import java.util.Collection; 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; /** * Servlet implementation class UpdataFile */ @MultipartConfig(location="E:/") @WebServlet("/UpdataFile") public class UpdataFile extends HttpServlet { private static final long serialVersionUID = 1L; private File file; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub System.out.println("1111111111"); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //得到part对象，这个对象有write的方法，直接写到指定位置。但是千万别忘了写@MultipartConfig(location="E:/")注解，不指定位置默认是写到注解指定的位置。 Part part = request.getPart("file"); //普通的字段可以采用常规的getparamter的方法得到。 System.out.println(new String(request.getParameter("name").getBytes("iso-8859-1"),"utf-8")); System.out.println(part.getName()); System.out.println(part.getHeader("Content-Disposition")); System.out.println(part.getSize()); String fileName = getFileNameFromPart(part); part.write(fileName); } //截取文件名 public String getFileNameFromPart(Part part) { String header = part.getHeader("Content-Disposition"); String fileName = header.substring(header.indexOf("filename=/"")+10, header.lastIndexOf("/"")); return fileName; } } 亲测有效。有不懂的可以留言
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-h5版本下js和servlet实现文件上传的教程 全部内容，希望文章能够帮你解决 html5教程-h5版本下js和servlet实现文件上传的教程 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-h5版本下js和servlet实现文件上传的教程的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219323