编写上传页面
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="upload.do" method="post" enctype="multipart/form-data">
name:<input type="text" name="user">
选择文件：<input type="file" name="pic">
<input type="submit" value="提交">
</form>
</body>
</html>
开发处理文件上传的Servlet
1、使用注解@MultipartConfig将一个Servlet标识为支持文件上传。
2、Servlet3.0将multipart/form-data的POST请求封装成Part，通过Part对上传的文件进行操作。
3.使用getSubmittedFileName方法需要tomcat8支持。
UploadServlet 代码如下：
@WebServlet(name = "UploadServlet",urlPatterns = "/upload.do")
@MultipartConfig
public class UploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String strUser = request.getParameter("user");
System.out.println(strUser);
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("UTF-8");
Part part = request.getPart("pic");
out.print("文件类型为：" + part.getContentType() + "<br/>");
out.print("文件的大小为：" + part.getSize() + "<br/>");
out.print("文件信息为：" + part.getHeader("content-disposition") + "<br/>");
out.print("文件的名字为：" + part.getSubmittedFileName());
//得到服务器项目发布运行所在地址
String strFolder = request.getServletContext().getRealPath("/image")+ File.separator;
File folder = new File(strFolder);
if(!folder.exists())
{
folder.mkdir();
}
// 此处未使用UUID来生成唯一标识,用日期做为标识
String strNewFilePath = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+ part.getSubmittedFileName();
String strFinalPath = strFolder + strNewFilePath;
//查看文件上传路径,方便查找
System.out.println(strFinalPath);
part.write(strFinalPath);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
ajax上传
<%--
Created by IntelliJ IDEA.
User: ttc
Date: 2018/7/13
Time: 8:47
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function upload() {
var form = new FormData(document.getElementById("upload"));
var req = new XMLHttpRequest();
req.open("post", "${pageContext.request.contextPath}/upload.do", true);
req.send(form);
req.onload = function () {
// alert(req.responseText);
document.getElementById('head').src = '${pageContext.request.contextPath}/upload/'+ req.responseText;
}
}
</script>
</head>
<body>
<form id="upload" action="${pageContext.request.contextPath}/upload.do" method="post" enctype="multipart/form-data">
<img src="${pageContext.request.contextPath}/upload/${picpath}" id="head">
<input type="text" name="username" value="zhangsan">
<input type="file" name="file1" onchange="upload();">
<input type="submit">
</form>
</body>
</html>
