视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
h5里js和servlet实现文件上传的实现步骤
2020-11-27 15:27:29 责编:小采
文档


这次教大家的是在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; 
 } 
}

相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

html5中的DOM编程的实现步骤

用H5做有特效的下拉框

HTML里FormData对象的详细介绍

下载本文
显示全文
专题