先来准备一下前置工作,需要导入组主要的两个包分别是Apache Commons FileUpload 1.5和Apache Commons IO 2.12.0 (记得是下载-bin文件,解压后就可以看到了,版本不一定要和我的相同)。
文件的上传与保存
- 上传文件(这里以图片为例,利用file是可以上传大多数文件的)
上传的jsp界面,这里详解一下enctype,它是属性规定在发送到服务器之前应该如何对表单数据进行编码。其中(multipart/form-data)不对字符编码,在使用包含文件上传控件的表单时,必须使用该值。
<%--
Created by IntelliJ IDEA.
User: BYABC
Date: 2023/5/30
Time: 20:53
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
</head>
<body>
<%--<video id="22" src="" controls></video>--%>
<img src="" id="23">
<!-- 通过from表单进行提交,类型为file multiple设置可以同时上传多个文件,其中
(enctype="multipart/form-data")这个为必要 -->
<!--
accept 可以对上传的文件进行限制
<input type="file" id="soundFile" accept="audio/*" />
<input type="file" id="videoFile" accept="video/*" />
<input type="file" id="imageFile" accept="image/*" /> -->
<form action="Servlet" method="post" enctype="multipart/form-data">
<input name="subimage" id="123" type="file" multiple />
<button type="submit">提交</button>
</form>
</body>
<script type="text/javascript">
//该方法是实现对上传图片的预览
$(function (){
$("#123").change(function () {
var files = this.files;
if (!files.length) {
return;
}
$("#23").attr("src", window.URL.createObjectURL(files[0]));//主要实现的功能是将页面中ID为"22"的元素的"src"属性设置为文件对象数组中第一个文件的URL。
});
})
</script>
</html>
select界面
这里主要使用了Fileltem类,可自行深入了解
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileItemHeaders;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.UUID;
@WebServlet(name = "Servlet", value = "/Servlet")
public class Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String showImg = null;
// FileItem 是表单中的每一个元素的封装
// 创建一个 FileItem 的工厂类
FileItemFactory factory = new DiskFileItemFactory();//可以设置临时文件夹和文件缓存区大小
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List<FileItem> items = upload.parseRequest(request);
System.out.println(items);//获取到的信息如下
// 包括文件名(name)、存储位置(StoreLocation)、文件大小(size)、是否为表单字段(isFormField)和字段名(FieldName)
//适用于所有文件
//遍历上面的结果集,可以将里面的数值取出来
for(FileItem item : items){
String name = item.getName();//获取上传文件的名字
String nname = item.getFieldName();//获取上传时input的名字
String n = item.getContentType();//获取文件的细化类型如 image/jpeg png 等
System.out.println(name);
System.out.println(nname);
System.out.println(n);
//isFormField() 判断是否为一个文件上传项,如果是则返回false
if(item.isFormField()){
System.out.println("不对此做处理");//如果不是文件上传项可以自行进行相应处理,这里只是测试用
}else { //处理上传的文件
//获取文件.之后的字符 即文件的后缀名
String imgtype = item.getName().substring(item.getName().lastIndexOf("."));
System.out.println(imgtype);
//为防止用户上传的文件出现重名要为文件重新命名
//UUID.randomUUID() UUID是由16个字节组成的字符串,通常表示为32个十六进制数字,用于生成通用唯一标识符;
String imgName = UUID.randomUUID() + imgtype;//设置上传的文件在数据库中的专属新名字
String Path = "D:\\IDE\\IDE project\\untitled2\\web\\file";//文件上传的地址 因为适用于所有文件的上传那么可以对存放的文件地址进行一个区分
item.write(new File(Path,imgName));//存放文件
//将文件的存储地址存放到数据库中,这里调用了util
String sqlPath = "file/" + imgName;//为方便后续的调用
System.out.println(sqlPath);
//将获取到的文件路径存放的数据库中,这里的方法有很多选择自己熟悉的即可(以下方法仅为个人习惯)
Dao dao = new Dao();
dao.in(sqlPath);
showImg = sqlPath;
}
}
} catch (FileUploadException e) {
throw new RuntimeException(e);
} catch (Exception e) {
throw new RuntimeException(e);
}
//将信息传到另一个jsp界面,并将文件显示出来,这里以图片为例
System.out.println(showImg);
HttpSession session = request.getSession();
session.setAttribute("showImg",showImg);
request.getRequestDispatcher("show.jsp").forward(request,response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
展示的界面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: BYABC
Date: 2023/5/30
Time: 20:53
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传结果</title>
</head>
<body>
展示界面
<%--需要配置一下服务器才能看到--%>
<img src="${showImg}" id="23"><br>
<%-- 这里是查看文件的路径,测试时用的--%>
<form action="Servlet" method="post" >
<input type="text" id="123" value="${showImg}" style="width: 1000px">
</form>
</body>
</html>
这里要简单配置一下Tomcat 服务器
在服务器里面添加刚刚的文件路径
并将虚拟路径改为/
运行并上传文件
此时就可以看到图片的相关信息,并在文件夹和数据库中分别看到文件本身和存放的地址。
[name=88950633_p0_master1200.jpg, StoreLocation=D:\IDE\apache-tomcat-8.5.69\temp\upload_f4f37735_f32c_445c_b09a_f6f860e10756_00000000.tmp, size=633670 bytes, isFormField=false, FieldName=subimage]
88950633_p0_master1200.jpg
subimage
image/jpeg
.jpg
file/a9942191-c3c6-4624-bbc3-08af0bb8b89e.jpg
file/a9942191-c3c6-4624-bbc3-08af0bb8b89e.jpg
文件上传完成。( 图片,视频,音乐的上传和预览是一样的,这里就不多写了