h5里js和servlet实现文件上传的实现步骤
程序员文章站
2022-03-21 23:12:26
...
这次教大家的是在H5里如何用JS和servlet来实现文件上传,不过有一个前提条件,必须要是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; } }
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是h5里js和servlet实现文件上传的实现步骤的详细内容,更多请关注其它相关文章!
推荐阅读
-
js jquery分别实现动态的文件上传操作按钮的添加和删除
-
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
-
js+jstl+servlet实现文件上传、列表展示及文件下载的代码详解
-
h5版本下js和servlet实现文件上传的教程
-
js jquery分别实现动态的文件上传操作按钮的添加和删除
-
BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤
-
【JavaWeb】一看就会的文件上传功能实现(附普通Servlet和SpringMVC完整实现代码)
-
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
-
js jquery分别实现动态的文件上传操作按钮的添加和删除_jquery
-
js jquery分别实现动态的文件上传操作按钮的添加和删除_jquery