JavaWeb之上传头像
2018-12-13 本文已影响165人
极课编程
JSP 可以与 HTML form 标签一起使用，来允许用户上传文件到服务器。上传的文件可以是文本文件或图像文件或任何文档。
需要引入的 jar 文件：commons-fileupload-1.3.2、commons-io-2.5.jar
I/O基础知识
I(Input输入)/O(Output输出)：I/O流 输入流/输出流
- 对文件的读操作：使用输入流
- 对文件的写操作：使用输出流
流的分类
-
输入流(InputStream)/输出流(OutputStream)
-
字节流/字符流：例如对图片进行操作（copy）使用字节流 对普通文件的操作可以使用字符流
-
节点流/处理流：节点流会直接关联到数据源上而处理流是对节点流功能的增强（不会直接关联数据源）
节点流
//使用FileInputStream对数据源读取字节
FileInputStream fis = new FileInputStream("b1.jpg");
//使用FileOutputStream向目标文件写字节
FileOutputStream fos = new FileOutputStream("b1_demo.jpg");
处理流
fr = new FileReader("Test.java");//源文件
br = new BufferedReader(fr);//处理流对fr节点流功能的增强
FileWriter fw = new FileWriter("Test_New.java");//目标文件
BufferedWriter bw = new BufferedWriter(fw);//处理流对fw节点流功能的增强
- 在API中凡是以InputStream/OutputStream结尾的都是字节流
- 凡是以Reader/Writer结尾的都是字符流
- InputStream、 OutputStream、 Reader、Writer这四个类，是这两大继承体系的父类
- 所有字节流的根父类为：InputStream、 OutputStream
- 所有字符流的根父类为： Reader、Writer
创建一个文件上传表单
需要注意：
表单 method 属性应该设置为 POST 方法，不能使用 GET 方法。
表单 enctype 属性应该设置为 multipart/form-data.
表单 action 属性应该设置为在后端服务器上处理文件上传的 Servlet 文件。
上传单个文件，您应该使用单个带有属性 type="file" 的 <input .../> 标签。为了允许多个文件上传，请包含多个 name 属性值不同的 input 标签。输入标签具有不同的名称属性的值。浏览器会为每个 input 标签关联一个浏览按钮。
Servlet
package com.foreknow.servlet;
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;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
/**
* Created by foreknow on 2018/12/13.
MultipartConfig
使用注解MultipartConfig 将一个 Servlet 标识为支持文件上传。Servlet3.0 将
multipart/form-data 的 POST 请求封装成 Part，通过 Part 对文件进行上传。
Servlet3 没有提供直接获取文件名的方法,需要从请求头中解析出来
*/
@WebServlet(name = "UploadServlet",urlPatterns = "/upload")
@MultipartConfig
public class UploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Part part = request.getPart("file");
String name = part.getSubmittedFileName();
UUID uuid = UUID.randomUUID();
String path = request.getServletContext().getRealPath("")+"/pic/";
File file = new File(path);
if (!file.exists()){
file.mkdirs();
}
part.write(path+uuid+name);
response.getWriter().print(uuid+name);
request.getSession().setAttribute("pic",uuid+name);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
注意可能遇到的问题
在tomcat8使用servlet3.0上传文件，原来按以下步骤就可以完成
1.Part part = request.getPart("XX");
2.part.getSubmittedFileName()//直接获取文件名
3.part.write(realPath)
在tomcat7 的环境下就没有part.getSubmittedFileName()这一方法，无法直接获取文件名
解决方案：
String cd = part.getHeader("Content-Disposition");
//截取不同类型的文件需要自行判断
String filename = cd.substring(cd.lastIndexOf("=")+2, cd.length()-1);
upload.jsp
<%--
User: foreknow
Date: 2018/12/13
Time: 9:08
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
window.onload = function () {
document.querySelector("#file").onchange = function () {
var req = new XMLHttpRequest();
var form = new FormData(document.getElementById("form1"));
// form.append("file",document.querySelector("#file").files[0]);
req.open("post", "${pageContext.request.contextPath}/upload", true);
req.send(form);
req.onload = function () {
document.getElementById("img").src = "${pageContext.request.contextPath}/pic/" + req.responseText;
}
}
}
</script>
<style>
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<form id="form1" action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data">
<img id="img" src="${pageContext.request.contextPath}/pic/${pic}"
onerror="this.src='${pageContext.request.contextPath}/b1.jpg'">
<input type="file" name="file" id="file">
</form>
</body>
</html>
