jsp上传图片
这是基本页面
点击上传后如果name或者file里面为空，都会提示
这是选择完的，会生成一个blob本地链接来渲染图片
提交前
提交后
这边注意一下，就是webapp里面的项目会跟本地项目里面文件夹同步，也就是说本地文件夹没有的，它等会同步的时候就会消失。
所以我上传的时候在本地项目里面也传了一个
这样就不会同步不见了。
以下是eclipse版本代码：
需求：
链接：
https://ww.lanzous.com/b01beyvzc
密码:anpo
<%@page import="java.util.Date"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="java.io.*"%><%--
Created by IntelliJ IDEA.
User: Skity666
Date: 2020/5/17 0017
Time: 15:05
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="Java"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>乌拉</title>
<style>
.container {
position: absolute;
top: 100px;
left: 50%;
text-align: center;
width: 400px;
margin-left: -200px;
}
</style>
</head>
<body>
<%
//全局配置下面img src所要用的路径
String imageUrl="";
try {
//设置ContentType字段值
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
//获取字符流，可以使用writer.print()在页面打印值
PrintWriter writer = response.getWriter();
// 创建DiskFileItemFactory工厂对象
DiskFileItemFactory factory = new DiskFileItemFactory();
//设置文件缓存目录，如果该目录不存在则新创建一个
File f = new File("E:\\TempFolder");
if (!f.exists()) {
f.mkdirs();
}
// 设置文件的缓存路径
factory.setRepository(f);
// 创建 ServletFileUpload对象
ServletFileUpload fileupload = new ServletFileUpload(factory);
//设置字符编码
fileupload.setHeaderEncoding("utf-8");
//判断request.getContentType()不为空，也就是request里面没有form数据
if(request.getContentType()!=null){
// 解析 request，得到上传文件的FileItem对象
List<FileItem> fileitems = fileupload.parseRequest(request);
// 遍历集合
for (FileItem fileitem : fileitems) {
// 判断是否为普通文本表单字段
if (fileitem.isFormField()) {
//打印出来表单中对应的name和value
// writer.print(fileitem.getFieldName()+"：" + fileitem.getString("utf-8") + "<br>");
} else {//文件表单字段
// 获取上传的文件名
String filename = fileitem.getName();
// System.out.println(filename);
//如果文件名不为空
if (filename != null && !filename.equals("")) {
// String message = "上传的文件名称是：" + filename + "<br>";
// 截取出文件名前缀
String prefix = filename.substring(0,filename.lastIndexOf("."));
// 截取出文件名后缀
String suffix = filename.substring(filename.lastIndexOf("."));
// 文件名需要唯一
filename=prefix+"_"+new Date().getTime()+suffix;
// System.out.println("截止"+prefix+suffix +" "+filename);
// 在服务器创建上传文件目录
String webPath = "/upload/";
// System.out.println(request.getContextPath());
//将服务器中文件夹路径组合成完整的服务器端路径
String filepath = getServletContext().getRealPath(webPath);
//判断服务器文件夹是否存在
File webFile = new File(filepath);
if (!webFile.exists()) {
webFile.mkdirs();
}
// System.out.println("服务器目录路径：" + filepath);
将完整的服务器端路径加上文件名补全
filepath=filepath+filename;
// System.out.println("服务器文件路径：" + filepath);
//判断文件是否存在
File file = new File(filepath);
if (!file.exists()) {
file.createNewFile();
}
// 获得上传文件流
InputStream in = fileitem.getInputStream();
//为了Tomcat文件不因为跟项目同步而消失,而创建的本地文件
//这是当前项目的路径，根据自己项目的实际路径更改
String path = "G://2018、2019//17大二//课设//05//WebContent";
String uploadName=path+"/upload/";
File upload=new File(uploadName);
if (!upload.exists()) {
upload.mkdirs();
}
// 使用FileOutputStream打开服务器端的上传文件
//FileOutputStream
FileOutputStream out1 = new FileOutputStream(file);
FileOutputStream out2 = new FileOutputStream(uploadName+filename);
// 流的对拷
byte[] buffer = new byte[1024];//每次读取1个字节
int len;
//开始读取上传文件的字节，并将其输出到服务端的上传文件输出流中
while ((len = in.read(buffer)) > 0){
out1.write(buffer, 0, len);
out2.write(buffer, 0, len);
}
// 关闭流
in.close();
out1.close();
out2.close();
// 删除临时文件
fileitem.delete();
//删除缓存目录
f.delete();
//组成图片路径
imageUrl=request.getContextPath()+webPath+filename;
// System.out.println("图片路径"+imageUrl);
}
}
}
}
} catch (Exception e) {
e.printStackTrace();
System.out.println("出错了");
}
%>
<div class="container">
<!--这里的ss.jsp是你自己的jsp名字-->
<form action="ss.jsp" enctype="multipart/form-data" method="post"
>
<!-- required="true"这句话表示这个字段不能为空 -->
<table>
<tr>
<td>name:
<input type="text" name="name" value="" required="true">
</td>
</tr>
<tr>
<td>
<img src="<%=imageUrl%>" alt="图片为空" id="image" width="50px" height="50px" align="middle">
</td>
</tr>
<tr>
<td>
<input type="file" name="File" id="File" onchange="changeFile()" required="true">
</td>
</tr>
<tr>
<td>班级：
<select name="classes">
<option value="一班">一班</option>
<option value="二班">二班</option>
<option value="三班">三班</option>
</select>
</td>
</tr>
<tr>
<td>性别：
<input type="radio" name="sex" id="man" checked value="男" />男
<input type="radio" name="sex" id="woman" value="女" />女
</td>
</tr>
<tr>
<td>年龄:
<select name="age">
<%
for (int i = 1; i < 100; i++) {
%>
<option value="<%=i%>岁"><%=i%>岁</option>
<%
}
%>
</select>
</td>
</tr>
<tr>
<td>
<button type="submit">上传</button>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
//选择图片后渲染img
function changeFile() {
var image = document.getElementById('image');
// var address = document.getElementById('File').value;
// document.getElementById('address').innerHTML=address;
//获得文件对象
var name = document.getElementById('File').files[0];
var url;
//如果name不为空，创建相对的本地blob链接
if (name) {
url = window.URL.createObjectURL(name);
}
//渲染img
image.src = url;
}
</script>
</body>
</html>
以下是idea的代码版本
需求
链接：
https://ww.lanzous.com/b01beyvzc
密码:anpo
中间遇到的一些情况，以下链接或许可以解答：
https://jingyan.baidu.com/article/0f5fb0993e9e1f6d8334ead2.html
https://blog.csdn.net/malz_zh/article/details/85098356
https://www.jianshu.com/p/1c3a39f3c057
<%@page import="java.util.Date"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.List" %>
<%--
Created by IntelliJ IDEA.
User: Skity666
Date: 2020/5/17 0017
Time: 15:05
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="Java"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>乌拉</title>
<style>
.container {
position: absolute;
top: 100px;
left: 50%;
text-align: center;
width: 400px;
margin-left: -200px;
}
</style>
</head>
<body>
<%
//全局配置下面img src所要用的路径
String imageUrl="";
try {
//设置ContentType字段值
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
//获取字符流，可以使用writer.print()在页面打印值
PrintWriter writer = response.getWriter();
// 创建DiskFileItemFactory工厂对象
DiskFileItemFactory factory = new DiskFileItemFactory();
//设置文件缓存目录，如果该目录不存在则新创建一个
File f = new File("E:\\TempFolder");
if (!f.exists()) {
f.mkdirs();
}
// 设置文件的缓存路径
factory.setRepository(f);
// 创建 ServletFileUpload对象
ServletFileUpload fileupload = new ServletFileUpload(factory);
//设置字符编码
fileupload.setHeaderEncoding("utf-8");
//判断request.getContentType()不为空，也就是request里面没有form数据
if(request.getContentType()!=null){
// 解析 request，得到上传文件的FileItem对象
List<FileItem> fileitems = fileupload.parseRequest(request);
// 遍历集合
for (FileItem fileitem : fileitems) {
// 判断是否为普通文本表单字段
if (fileitem.isFormField()) {
//打印出来表单中对应的name和value
// writer.print(fileitem.getFieldName()+"：" + fileitem.getString("utf-8") + "<br>");
} else {//文件表单字段
// 获取上传的文件名
String filename = fileitem.getName();
// System.out.println(filename);
//如果文件名不为空
if (filename != null && !filename.equals("")) {
// String message = "上传的文件名称是：" + filename + "<br>";
// 截取出文件名前缀
String prefix = filename.substring(0,filename.lastIndexOf("."));
// 截取出文件名后缀
String suffix = filename.substring(filename.lastIndexOf("."));
// 文件名需要唯一
filename=prefix+"_"+new Date().getTime()+suffix;
// System.out.println("截止"+prefix+suffix +" "+filename);
// 在服务器创建上传文件目录
String webPath = "/upload/";
// System.out.println(request.getContextPath());
//将服务器中文件夹路径组合成完整的服务器端路径
String filepath = request.getSession().getServletContext().getRealPath(webPath);
// System.out.println(filepath);
// break;
//判断服务器文件夹是否存在
File webFile = new File(filepath);
if (!webFile.exists()) {
webFile.mkdirs();
}
// System.out.println("服务器目录路径：" + filepath);
将完整的服务器端路径加上文件名补全
filepath=filepath+filename;
// System.out.println("服务器文件路径：" + filepath);
//判断文件是否存在
File file = new File(filepath);
if (!file.exists()) {
file.createNewFile();
}
// 获得上传文件流
InputStream in = fileitem.getInputStream();
//为了Tomcat文件不因为跟项目同步而消失,而创建的本地文件
//这是当前项目的路径，根据自己项目的实际路径更改
String path = "G://2018、2019//17大二//课设//05//WebContent";
String uploadName=path+"/upload/";
File upload=new File(uploadName);
if (!upload.exists()) {
upload.mkdirs();
}
// 使用FileOutputStream打开服务器端的上传文件
//FileOutputStream
FileOutputStream out1 = new FileOutputStream(file);
FileOutputStream out2 = new FileOutputStream(uploadName+filename);
// 流的对拷
byte[] buffer = new byte[1024];//每次读取1个字节
int len;
//开始读取上传文件的字节，并将其输出到服务端的上传文件输出流中
while ((len = in.read(buffer)) > 0){
out1.write(buffer, 0, len);
out2.write(buffer, 0, len);
}
// 关闭流
in.close();
out1.close();
out2.close();
// 删除临时文件
fileitem.delete();
//删除缓存目录
f.delete();
//组成图片路径
imageUrl=request.getContextPath()+webPath+filename;
// System.out.println("图片路径"+imageUrl);
}
}
}
}
} catch (Exception e) {
e.printStackTrace();
System.out.println("出错了");
}
%>
<div class="container">
<!--这里的index.jsp是你自己的jsp名字-->
<form action="index.jsp" enctype="multipart/form-data" method="post"
>
<div>
<!-- required="true"这句话表示这个字段不能为空 -->
<span>name</span> <input type="text" name="name" value="" required="true">
</div>
<div>
<img src="<%=imageUrl%>" alt="图片为空" id="image" width="50px" height="50px"
align="middle"> <br> <input type="file" name="File"
id="File" onchange="changeFile()" required="true">
</div>
<div>
<span>班级：</span> <select name="classes">
<option value="一班">一班</option>
<option value="二班">二班</option>
<option value="三班">三班</option>
</select>
</div>
<div>
<span>性别：</span> <input type="radio" name="sex" id="man" checked
value="男" />男 <input type="radio" name="sex" id="woman" value="女" />女
</div>
<div>
<span>年龄:</span> <select name="age">
<%
for (int i = 1; i < 100; i++) {
%>
<option value="<%=i%>岁"><%=i%>岁
</option>
<%
}
%>
</select>
</div>
<div>
<button type="submit">上传</button>
</div>
</form>
</div>
<script type="text/javascript">
//选择图片后渲染img
function changeFile() {
var image = document.getElementById('image');
// var address = document.getElementById('File').value;
// document.getElementById('address').innerHTML=address;
//获得文件对象
var name = document.getElementById('File').files[0];
var url;
//如果name不为空，创建相对的本地blob链接
if (name) {
url = window.URL.createObjectURL(name);
}
//渲染img
image.src = url;
}
</script>
</body>
</html>
注意：
在idea里面光导包进去还不行，会跳出 500无法为jsp编译类
这是你包导进去了，但是没有添加到实例里面
步骤：
如果你包导完了，你这边会提示有数字
点进去，点【fix】添加到实例里面去，就行了
获取Tomcat的webapp地址
eclipse：
String filepath = getServletContext().getRealPath(webPath);
idea：
String filepath = request.getSession().getServletContext().getRealPath(webPath);
如果对你有帮助，请点下赞吧。
毕竟我也是用爱发电
扫一扫
6867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
