spring boot thymeleaf 图片上传web项目根目录操作步骤

thymeleaf介绍

简单说, Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸引人的特点:

1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3.Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

form方式上传:

//html:
<form enctype="multipart/form-data" method="post" action="/sell/imageUpload">
<div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
 <h4 class="modal-title" id="myModalLabel">Edit goods information</h4>
</div>
<div class="modal-body">
 <div class="input-group">
  <label class="col-lg-4">name:</label>
  <input class="col-lg-8" id="edit_name" value="${goods.name}" name="name"/>
 </div>
<div class="input-group">
  <label class="col-lg-4">code:</label>
  <input class="col-lg-8" id="edit_sn" name="sn" value="${goods.sn}" />
 </div>
<div class="input-group">
  <label class="col-lg-4">weight:</label>
  <input class="col-lg-8" id="edit_weight" name="weight" value="${goods.weight}" />
 </div>
<div class="input-group">
  <label class="col-lg-4">marketPrice:</label>
  <input class="col-lg-8" id="edit_marketPrice" name="marketPrice" value="${goods.marketPrice}" />
 </div>
<div class="input-group">
  <label class="col-lg-4">shopPrice:</label>
  <input class="col-lg-8" id="edit_shopPrice" name="shopPrice" value="${goods.shopPrice}" />
 </div>
<div class="input-group">
  <label class="col-lg-4">unit:</label>
  <input class="col-lg-8" id="edit_unit" name="unit" value="${goods.unit}" />
 </div>
<div class="input-group">
  <label class="col-lg-4">number:</label>
  <input class="col-lg-8" id="edit_number" name="number" value="${goods.number}" />
 </div>
 <div class="input-group">
  <label class="col-lg-4">detail:</label>
  <textarea class="col-lg-8" id="edit_detail" name="detail" value="${goods.detail}" />
 </div>
<div class="input-group">
 <!--<form enctype="multipart/form-data" method="post" action="/sell/imageUpload">
  <input ype="hidden" id="edit_goods_sn" name="sn" value="${goods.sn}" />-->
  image<input type="file" id="edit_image" name="file"/>
  <input type="submit" value="upload"/>
 <!--</form>-->
 </div>
</div>
<div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
 <input type="submit" class="btn btn-primary" id="edit_save" value="submit">提交更改</input>
</div>
</form>
//controller
 @RequestMapping(value = "/save",method = RequestMethod.POST)
 public String saveGoodsPage(@RequestParam(value = "id",required=false) String id,@RequestParam(value = "name",required=false) String name,@RequestParam(value = "sn",required=false) String sn,
        @RequestParam(value = "number",required=false) String number,@RequestParam(value = "weight",required=false) String weight,
        @RequestParam(value = "marketPrice",required=false) String marketPrice,@RequestParam(value = "shopPrice",required=false) String shopPrice,
        @RequestParam(value = "unit",required=false) String unit, @RequestParam(value = "detail",required=false) String detail,@RequestParam (value="file")MultipartFile file ) {
 if (!file.isEmpty()) {
  try {
   BufferedOutputStream out = new BufferedOutputStream(
     new FileOutputStream(new File("src/main/resources/static/images/product/" + sn + ".jpg")));//保存图片到目录下
   out.write(file.getBytes());
   out.flush();
   out.close();
   String filename = "\\/images\\/product\\/" + sn + ".jpg";
   /*user.setTupian(filename);
   //userRepository.save(user);//增加用户*/
  } catch (FileNotFoundException e) {
   e.printStackTrace();
   return "upload error," + e.getMessage();
  } catch (IOException e) {
   e.printStackTrace();
   return "upload error" + e.getMessage();
  }
 }
  //...其他操作
 }

补充:变量表达式和星号表达有什么区别吗?

如果不考虑上下文的情况下,两者没有区别;星号语法评估在选定对象上表达,而不是整个上下文什么是选定对象?就是父标签的值,如下:

 <div th:object="${session.user}">
 <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
 <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
 <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
 </div>

这是完全等价于:

 <div th:object="${session.user}">
  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
 </div>

当然,美元符号和星号语法可以混合使用:

 <div th:object="${session.user}">
  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
 </div>

总结

以上所述是小编给大家介绍的spring boot thymeleaf 图片上传web项目根目录操作步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

您可能感兴趣的文章:

  • SpringBoot+Websocket实现一个简单的网页聊天功能代码
  • SpringBoot 创建web项目并部署到外部Tomcat
  • IDEA上面搭建一个SpringBoot的web-mvc项目遇到的问题
  • 基于SpringBoot与Mybatis实现SpringMVC Web项目
  • SpringBoot webSocket实现发送广播、点对点消息和Android接收
(0)

相关推荐

  • SpringBoot+Websocket实现一个简单的网页聊天功能代码

    最近做了一个SpringBoot的项目,被SpringBoot那简介的配置所迷住.刚好项目中,用到了websocket.于是,我就想着,做一个SpringBoot+websocket简单的网页聊天Demo. 效果展示: 当然,项目很简单,没什么代码,一眼就能明白 导入websocket的包. 通过使用SpringBoot导入包的时候,我们可以发现,很多包都是以 spring-boot-starter 开头的,对于我这种强迫症 ,简直是福音 <dependency> <groupId>

  • SpringBoot 创建web项目并部署到外部Tomcat

    前言 使用SpringBoot来开发项目相对于传统模式,要快速优雅许多,相信目前国内绝大部分web项目的开发还没有使用SpringBoot来做,如果你正需要开发一个web项目,不妨尝试使用SpringBoot来做. 本身SpringBoot是内嵌了web服务器,不需要单独的Tomcat,但是实际生产环境中,如果是web项目,Tomcat肯定是运维部门部署好了的,这个Tomcat,做了一些个性化的设置,开发出来的项目需要部署到这个Tomcat,如果是使用SpringBoot开发web服务,我认为可

  • 基于SpringBoot与Mybatis实现SpringMVC Web项目

    一.热身 一个现实的场景是:当我们开发一个Web工程时,架构师和开发工程师可能更关心项目技术结构上的设计.而几乎所有结构良好的软件(项目)都使用了分层设计.分层设计是将项目按技术职能分为几个内聚的部分,从而将技术或接口的实现细节隐藏起来. 从另一个角度上来看,结构上的分层往往也能促进了技术人员的分工,可以使开发人员更专注于某一层业务与功能的实现,比如前端工程师只关心页面的展示与交互效果(例如专注于HTML,JS等),而后端工程师只关心数据和业务逻辑的处理(专注于Java,Mysql等).两者之间

  • SpringBoot webSocket实现发送广播、点对点消息和Android接收

    1.SpringBoot webSocket SpringBoot 使用的websocket 协议,不是标准的websocket协议,使用的是名称叫做STOMP的协议. 1.1 STOMP协议说明 STOMP,Streaming Text Orientated Message Protocol,是流文本定向消息协议,是一种为MOM(Message Oriented Middleware,面向消息的中间件)设计的简单文本协议. 它提供了一个可互操作的连接格式,允许STOMP客户端与任意STOMP消

  • IDEA上面搭建一个SpringBoot的web-mvc项目遇到的问题

    这几天一直在研究IDEA上面怎么搭建一个web-mvc的SpringBoot项目,看网上的教程一步步的搭建,可是还是出现一堆的问题. 为了让大家以后少走一些弯路,我在这里分享一下我这几天研究的成果,也希望对大家能有所帮助. 这里先介绍一下各种环境的配置信息:idea2016.2.1  jdk1.8.0_31 因为SpringBoot中是内置tomcat的,所以也就不需要额外的tomcat配置了,现在开始讲如何在idea上面搭建SpringBoot web-mvc项目了 步骤一:在IDEA中新建一

  • spring boot thymeleaf 图片上传web项目根目录操作步骤

    thymeleaf介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 t

  • Spring Boot 实现图片上传并回显功能

    一.常规形式 1 项目结构 2 配置文件及环境设置 (1)配置文件 # 应用服务 WEB 访问端口 server.port=8080 # spring 静态资源扫描路径 spring.resources.static-locations=classpath:/static/ # 访问template下的html文件需要配置模板 spring.thymeleaf.prefix.classpath=classpath:/templates/ # 是否启用缓存 spring.thymeleaf.cac

  • spring boot实现图片上传和下载功能

    这篇博客简单介绍下spring boot下图片上传和下载,已经遇到的问题.首先需要创建一个spring boot项目. 1.核心的controller代码 package com.qwrt.station.websocket.controller; import com.alibaba.fastjson.JSONObject; import com.qwrt.station.common.util.JsonUtil; import org.slf4j.Logger; import org.slf

  • spring boot实现图片上传到后台的功能(浏览器可直接访问)

    目录 1. 配置上传文件最大数值 2. 配置虚拟路径映射 3. 编写controller程序 4. 测试 1. 配置上传文件最大数值 默认情况下,在spring boot嵌入的tomcat限制了上传文件的大小,在spring boot的我官方文档中说明,每个文件的最大配置为1Mb,单次请求的总文件数不能大于10Mb. 这意味着如果你上传的图片大于1Mb,会被拦截下来,无法正常保存到后台,并抛出一个错误,返回状态码:500. The field file exceeds its maximum p

  • Spring Boot实现图片上传功能

    本文实例为大家分享了Spring Boot图片上传的具体代码,供大家参考,具体内容如下 package com.clou.inteface.domain.web.user; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.Map; import org.apache.commons.lang3.StringUtils; import org.springfram

  • Spring Boot实现图片上传/加水印一把梭操作实例代码

    概述 很多网站的图片为了版权考虑都加有水印,尤其是那些图片类网站.自己正好最近和图片打交道比较多,因此就探索了一番基于 Spring Boot这把利器来实现从 图片上传 → 图片加水印 的一把梭操作! 本文内容脑图如下: 本文内容脑图 搭建 Spring Boot基础工程 过程不再赘述了,这里给出 pom中的关键依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId>

  • Spring Boot实现文件上传下载

    本文实例为大家分享了Spring Boot实现文件上传下载的具体代码,供大家参考,具体内容如下 示例[Spring Boot  文件上传下载] 程序清单:/springboot2/src/main/resources/templates/register.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8

  • spring boot2.0图片上传至本地或服务器并配置虚拟路径的方法

    最近写了关于图片上传至本地文件夹或服务器,上传路径到数据库,并在上传时预览图片.使用到的工具如下: 框架:spring boot 2.0 前端模板:thymeleaf 图片预览:js 首先,上传以及预览,js以及<input type="file">,以及预览图片的JS function Img(obj){ var imgFile = obj.files[0]; console.log(imgFile); var img = new Image(); var fr = ne

  • 使用Vue+Spring Boot实现Excel上传功能

    1.使用Vue-Cli创建前端项目 运用vue-cli工具可以很轻松地构建前端项目,当然,使用WebStorm来构建会更加简洁(如图).本文推荐使用WebStorm,因为在后续开发中,IDE会使我们的开发更加简洁.部分配置如图: 2.Navbar编写 作为一个WebApp,Navbar作为应用的导航栏是必不可少的.在本项目中,笔者引入了bootstrap对Navbar进行了轻松地构建.在vue中我们需要在components文件夹中将我们的组件加进去,对于本工程来说,Navbar是我们要加入的第

  • 手撸一个Spring Boot Starter并上传到Maven中央仓库

    目录 打包上传到中央仓库 第一步 在issues.sonatype.org注册一个账号 第二步 在issues.sonatype.org提交Issue 第三步 配置Maven Setting.xml 第四步 配置项目的pom.xml 第五步 安装和配置GPG 第六步 项目打包上传 第七步 处理验证 问题 我1.0.1版本发布错了,有办法修改或者删除吗? 先手撸一个Spring Boot Starter 准备搞个项目,包含以下几个功能后边还会加新功能. 配置项加密(已实现) 服务调用链 数据脱敏

随机推荐