h5里js与servlet完成文件上传的完成步骤
发表时间:2023-12-24 来源:明辉站整理相关软件相关文章人气:
[摘要]这次教大家的是在H5里如何用JS和servlet来实现文件上传,不过有一个前提条件,必须要是h5和jsp3.0版本,因为用到了新属性,获取file对象和后台得到part对象。下面给大家看一个案列前台jsp<%@ page language="java" contentTy...
这次教大家的是在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;
}
}
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
html5中的DOM编程的实现步骤
用H5做有特效的下拉框
HTML里FormData对象的详细介绍
以上就是h5里js和servlet实现文件上传的实现步骤的详细内容,更多请关注php中文网其它相关文章!
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。