この記事では
、写真をアップロードする方法を説明します。1。まず、ssmフレームワークを構築し、WEB-INFのlibパッケージの下に2つのjarパッケージを導入します
。commons-fileupload-1.2.1.jarcommons-
io-1.4.jar
ダウンロードアドレス:https
://pan.baidu.com/s/1iNQ0ekCeTJ2tIGMqaCwFtw抽出コード:w24t
ダウンロードパス私のBaiduクラウドディスクはバージョンを提供するか、オンラインで見つけることができます。
ここでは、アバターをアップロードするユーザーの例をシミュレートして写真をアップロードします。
2.index.jspファイルは主にアップロードインターフェイスです。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<form action="upload.do" method="post"
enctype="multipart/form-data">
<label>用户名:</label><input type="text" name="uname" required><br> <label>密码:</label><input
type="password" name="pwd" required><br> <label>上传头像:</label><input
type="file" name="file"><br> <input type="submit" value="展示">
</form>
</body>
</html>
3. show.jspファイルは、主にアップロードされたファイルについて説明しています。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
</head>
<body>
<h3>显示图片</h3>
${user.image}<br>
<img id="image" name="image" src="images/${user.image}"><br>
用户名:${user.uname}
</body>
</html>
通常の追加、削除、変更、チェックとは異なり、画像のアップロードを実装するにはMultipartFileインターフェースを使用する必要があります。したがって、エンティティクラスに属性を追加し、private MultipartFile file;
そのgetメソッドとsetメソッドを生成する必要があります。**支払う必要があるもの注意:この属性は画像の保存には使用されませんが、画像をアップロードするための補助属性です。つまり、データベースにこの属性を含めることはできません。
エンティティクラス属性(データベースはそれ自体で構築されます):
private Integer uid;
private String uname;
private String pwd;
private String image;
//辅助图片上传属性
private MultipartFile file;
getメソッドとsetメソッドは、
4.controllerレイヤーコードを独自に生成します(私はそれを自分でアクションと名付けました)。
import java.io.File;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.biz.IUserService;
import com.po.Users;
@Controller
public class UsersAction {
@Autowired
private IUserService userService;
public IUserService getUserService() {
return userService;
}
public void setUserService(IUserService userService) {
this.userService = userService;
}
@RequestMapping("upload.do")
public String upload(Users user, HttpServletRequest request, Model model)
throws Exception {
// 保存数据库的路径
String realPath = request.getSession().getServletContext().getRealPath("/");
//String sqlPath = null;
// 定义文件保存的本地路径
//String localPath = "D:\\File\\";
// 定义 文件名
String filename = null;
if (!user.getFile().isEmpty()) {
// 生成uuid作为文件名称
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
// 获得文件类型(可以判断如果不是图片,禁止上传)
String contentType = user.getFile().getContentType();
// 获得文件后缀名
String suffixName = contentType
.substring(contentType.indexOf("/") + 1);
// 得到 文件名
filename = uuid + "." + suffixName;
// 文件保存路径
user.getFile().transferTo(new File(realPath + "/images/"+ filename));
}
// 把图片的相对路径保存至数据库
//sqlPath = "/images/" + filename;
//System.out.println(sqlPath);
user.setImage(filename);
userService.addUser(user);
model.addAttribute("user", user);
return "show.jsp";
}
}
applicationContext.xml構成ファイルは、次の構成を追加する必要があります。
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"/>
<!-- 最大内存大小 -->
<property name="maxInMemorySize" value="10240"/>
<!-- 最大文件大小,-1为不限制大小 -->
<property name="maxUploadSize" value="-1"/>
</bean>
<tx:annotation-driven transaction-manager="txmanager"/>
此时,便可以试着运行一下!效果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190710180017698.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxMTc1OTMzNjk1MA==,size_16,color_FFFFFF,t_70)
在这我们选择这张灰太狼照片,然后点击展示,图片将呈现出来,如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190710180111906.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxMTc1OTMzNjk1MA==,size_16,color_FFFFFF,t_70)
このとき、データベースには相対情報もあります。
画像はサーバーのTomcaに保存されます。