脚本宝典收集整理的这篇文章主要介绍了html5教程-h5版本下js和servlet实现文件上传的教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
必须是h5和jsp3.0版本的。因为用到的是新属性，比如获取file对象，后台得到part对象等。
<%@ 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> 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; } } 亲测有效。有不懂的可以留言
必须是h5和jsp3.0版本的。因为用到的是新属性，比如获取file对象，后台得到part对象等。
<%@ 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> 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实现文件上传的教程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。