首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Spring MVC :-如何让上传的图片在用户选择图片后立即显示在jsp页面上。

在Spring MVC中,可以通过以下步骤实现让上传的图片在用户选择图片后立即显示在JSP页面上:

  1. 在JSP页面上添加一个用于显示图片的标签,例如<img>标签。
  2. 在Spring MVC的Controller中,创建一个处理文件上传的方法,并使用@RequestMapping注解将该方法与对应的URL映射起来。
  3. 在文件上传方法中,使用MultipartFile参数接收上传的文件,并将文件保存到服务器的指定位置。
  4. 获取保存后的文件路径,并将该路径存储到Model中,以便在JSP页面上使用。
  5. 在JSP页面上,使用EL表达式${}获取Model中保存的文件路径,并将其赋值给<img>标签的src属性,以实现图片的显示。

下面是一个示例代码:

  1. JSP页面(index.jsp):
代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>上传图片示例</title>
</head>
<body>
    <form action="upload" method="post" enctype="multipart/form-data">
        <input type="file" name="image" id="image" onchange="previewImage(this)">
        <br>
        <img id="preview" src="" alt="预览图片">
        <br>
        <input type="submit" value="上传">
    </form>
    
    <script>
        function previewImage(file) {
            var preview = document.getElementById('preview');
            var reader = new FileReader();
            
            reader.onload = function(e) {
                preview.src = e.target.result;
            }
            
            reader.readAsDataURL(file.files[0]);
        }
    </script>
</body>
</html>
  1. Spring MVC的Controller:
代码语言:txt
复制
@Controller
public class UploadController {
    
    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String upload(@RequestParam("image") MultipartFile file, Model model) {
        if (!file.isEmpty()) {
            try {
                // 保存文件到服务器指定位置
                String filePath = "/path/to/save/image.jpg";
                file.transferTo(new File(filePath));
                
                // 将文件路径存储到Model中
                model.addAttribute("imagePath", filePath);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        
        return "result";
    }
}
  1. 结果页面(result.jsp):
代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>上传结果</title>
</head>
<body>
    <h1>上传成功!</h1>
    <img src="${imagePath}" alt="上传的图片">
</body>
</html>

在上述示例中,用户选择图片后,通过JavaScript的onchange事件触发previewImage()函数,该函数将用户选择的图片预览显示在<img>标签中。然后,用户点击上传按钮,表单数据将被提交到/uploadURL对应的方法中进行处理。在处理方法中,将上传的图片保存到服务器指定位置,并将文件路径存储到Model中。最后,将结果页面返回给用户,其中使用EL表达式${imagePath}获取Model中保存的文件路径,并将其赋值给<img>标签的src属性,以实现图片的显示。

请注意,上述示例中的文件保存路径和文件名需要根据实际情况进行修改。另外,为了简化示例,省略了文件上传的验证和错误处理部分,实际开发中需要根据需求进行完善。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Java文件上传与下载【面试+工作】

1.servlet 如何实现文件上传和下载? 1.1上传文件 通过前台选择文件,然后将资源上传到(即新建一个文件)到发布资源文件下面, 下载就是url 到发布资源文件,触发即可自动下载。...程序运行,可以通过单击需要下载文档实现下载 ? 但是这里会出现一个问题,就是单击下载压缩包时候会弹出下载页面,但是下载图片时候浏览器就直接打开了图片,没有下载。 ? ? ? ? ? ? ?...重启tomcat服务器,即可实现对压缩包和对图片下载。 ---- 2、struts如何实现文件上传和下载?...下面我们WebContent/WEB-INF下创建一个content文件夹,用于放文件上传、下载等jsp文件,下面我们创建uploadForm.jsp文件,演示Spring MVC文件上传: ?...有关MediaType和HttpStatus类可以参考Spring MVCAPI文档。 点击下载页面的超链接,显示文件正在下载,如下图所示: ?

3.7K40

springmvc笔记_SpringMVC优点

用户发请求 Servlet接收请求数据,并调用对应业务逻辑方法 业务处理完毕,返回更新数据给servlet servlet转向到JSP,由JSP来渲染页面 响应给前端更新页面 职责分析: Controller...图片 , 视频 … MVC注解驱动 配置视图解析器 resource目录下添加springmvc-servlet.xml配置文件,配置形式与Spring容器配置基本类似,为了支持基于注解IOC,...} Spring MVC中可以使用 @PathVariable 注解,方法参数值对应绑定到一个URI模板变量上。...利用AJAX可以做: 注册时,输入用户名自动检测用户是否已经存在。 登陆时,提示用户名密码错误 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功页面DOM中将数据行也删除。...2003年,Apache Software Foundation发布了开源Commons FileUpload组件,其很快成为Servlet/JSP程序员上传文件最佳选择

4.5K10

Spring MVC 学习总结(六)——Spring+Spring MVC+MyBatis框架集成

通过一个商品管理示例完成SSM框架集成,可以将前面学习过一些内容整合起来,使用到知识包含:SpringSpring MVC、MyBatis、JSR303校验、分页、文件上传、路径处理等。...八、配置web.xml加载Spring容器与MVC 修改web.xml文件,注册加载Spring容器所需监听器;注册Spring MVC前置控制器Servlet,中间还设置了Servlet3.0上传所需参数...num_display_entries:展示页码总数,默认为11,如果设置为0则简单显示“前一” next_text:下一文本 next_show_always:是否总显示下一...11.2、删除与多删除功能 为了实现删除与多删除功能,修改控制器,增加2个action,delete请求处理方法用于删除单个记录,id是路径变量指定要删除商品编号;pageNO是请求参数,保持状态目的是为了删除页面继续停留在某一...Install,进入下一步: 完成properties文件上右键选择“Open With”,具体步骤如下: views/jstl/goods目录下新增加add.jsp页面,页面内容如下: <%

71120

SpringMVC-07 拦截器+文件上传下载

3.验证用户是否登录 (认证用户) 实现思路 1、有一个登陆面,需要写一个controller访问页面。 2、登陆面有一提交表单动作。需要在controller中处理。判断用户名密码是否正确。...放行, 如果用户未登陆,跳转到登陆面 测试: 1、编写一个登陆面 login.jsp <%@ page contentType="text/html;charset=UTF-8" language=...2003年,Apache Software Foundation发布了开源Commons FileUpload组件,其很快成为Servlet/JSP程序员上传文件最佳选择。...Servlet3.0规范已经提供方法来处理文件上传,但这种上传需要在Servlet中完成。 而Spring MVC则提供了更简单封装。...Spring MVC为文件上传提供了直接支持,这种支持是用即插即用MultipartResolver实现

51020

Spring 全家桶之 Spring Web MVC(六)- AJAX & Fileupload

@JsonFormat注解指定格式,而不加@JSONFormat注解默认为时间戳戳格式,如下图所示 Spring MVC 处理 AJAX 请求 index.jsp同级目录下新增一个页面emps.jsp...,使用ajax请求获取所有员工并显示面上 <%@ page language="java" contentType="text/html...二、文件<em>上传</em> <em>Spring</em> <em>MVC</em> 为文件<em>上传</em>提供了直接<em>的</em>支持,这种支持是通过即插即用<em>的</em>MultipartResolver实现<em>的</em>,<em>Spring</em>是用Jakarta Commons FileUpload技术实现了一个.../form-data,将请求体中<em>的</em>文件分段发送到服务器端 <em>Spring</em> <em>MVC</em>文件<em>上传</em>需要在<em>Spring</em> <em>MVC</em>配置文件上配置<em>上传</em>解析器CommonsMultpartResolver,否则无法解析文件<em>上传</em>请求...方法即可完成<em>上传</em>文件<em>的</em>操作 <em>在</em>upload.<em>jsp</em>文件中<em>显示</em>文件<em>上传</em>是否成功<em>的</em>提示 文件<em>上传</em>表单 ${msg} <!

1.2K20

day64_SpringMVC学习笔记_02

对象(应用域对象),所以Model对象中数据,面上可以通过EL表达式进行获取。     ...需求分析:   使用ajax,响应json格式数据形式上传图片并立刻回显。...  创建一个动态java web项目:图片服务器项目,图片服务器项目的服务器和上传图片项目的服务器端口不一致即可。...image.png (7)图片上传位置 image.png (8)图片列表回显   回显图片需要使用标签 itemsList.jsp     <c:set var="picPath" ...* controller执行但未返回视图前调用此方法,即调用Controller了,还没返回ModelAndView执行      * 这里可在返回用户前对模型数据进行加工处理,比如这里加入公用信息以便页面显示

78110

java开发美妆化妆品电商商城系统

+bootscrap+css+jq+js+图片剪裁和压缩 +highcharts+simditor图文编辑器功能 首页,搜索商品,详情,可选择尺寸,衣服颜色,根据不同规格显示不同商品价格,加入购物车...被系统前端页面均使用JSP实现,当用户浏览器输入地址即可访问该网站。比如前台用户注册页面、购买商品页面、商品浏览页面等;后台管理员添加商品页面,订单管理页面等。...2.4 SSM框架本课题框架采用是SSM框架。SSM框架是Spring MVC +Spring + MyBatis框架整合。首先,Spring MVC框架是处理所有的HTTP请求和响应。...为了页面上商品图片大小一致,展示时候美观而不变形,本系统采用该插件,可对用户上传头像进行剪裁和压缩,对轮播图进行一定比例裁剪,包括管理员上传商品图片时也是用该插件进行了裁剪。...使用简单,学习成本低,最重要是可以对各种复杂sql进行分页和排序处理,其分页PageInfo对象,包含了分页所有信息,比如是否有下一和上一、总条数、每页显示几条数据、当前第几页等,足够前端分页展示使用

1.7K20

SSM之SpringMVC学习

1.2 Model2时代 用户发请求 Servlet接收请求数据,并调用对应业务逻辑方法 业务处理完毕,返回更新数据给servlet servlet转向到JSP,由JSP来渲染页面 响应给前端更新页面...-- Spring MVC不处理静态资源 --> <!...image.png 3.验证用户是否登录 (认证用户) 实现思路 1、有一个登陆面,需要写一个controller访问页面。 2、登陆面有一提交表单动作。需要在controller中处理。...放行, 如果用户未登陆,跳转到登陆面 测试: 1、编写一个登陆面 login.jsp <%-- Created by IntelliJ IDEA....2003年,Apache Software Foundation发布了开源Commons FileUpload组件,其很快成为Servlet/JSP程序员上传文件最佳选择

1.7K40

lagou 爪哇 1-3 spring mvc 笔记

username=zhangsan 3)程序要进行验证,有访问权限则放行,没有访问权限面上输出 注意:自己造几个用户以及url,上交作业时,文档提供哪个用户有哪个url访问权限 解题思路 流程梳理...jsp页面显示 入门案例实现分析 l jsp页面(显示当前系统时间) l 前端控制器dispatcherServletweb.xml中配置 l 写Handler获取当前系统时间(这里Handler就是...request域当中获取到变量,进行显示 [理解]SpringMVC架构 框架结构 [图片上传失败......(image-a9e7a3-1592497074318)] 文件服务器tomcat配置中加入,允许读写操作 [图片上传失败......-- 注意事项:Controller层扫描需要配置SpringMVC中,不要配置Spring扫描中 Spring只扫描service --> <context

1K20

【万字长文】Spring MVC 层层递进轻松入门 !

而随着现在用户需求增加,以及数据量增加,Web开发中,能够及时、正确地响应用户请求几乎已经可以说是必须了 ① 用户在前端面上,进行一个提交或者说点击 URL,就会向后端服务器发送一个请求...② 后端经过一系列处理(例如,从数据库中查到需要数据)把数据响应给前端页面 ③ 前端页面获取到响应内容,对其进行解析以及进行一些处理(例如:回显内容到页面) 今天重点要学习就是也就是——如何在获取请求对其解析...User 实体类中,这个实体类就属于 Model 层中 View(视图) 视图层中会选择一个恰当视图来显示最终执行结果 例如常见 HTML JSP 就是用来展示数据 Controller(控制...使用 Spring 可插入 MVC 架构,从而在使用Spring进行WEB开发时,可以选择使用SpringSpring MVC框架或集成其他MVC开发框架,如Struts1(现在一般不用),Struts...,开发人员仅需要规定应用中不符合约定部分 (三) Spring MVC 与 Struts 区别 Struts 也是一款基于 MVC 这种开发模式 JavaEE框架,近些年来,实际上开发者更多选择使用

1.3K10

SSM 项目 ——— 小米商城后台管理系统

:使用MultipartFile这个类主要是来实现以表单形式进行多文件上传功能 (4) 注册注解驱动:,默认会帮我们注册默认处理请求,参数和返回值类。...-- /.modal --> 结果如图: 所有商品显示中。 接下来,我们需要完成是分页操作。...,从服务器端得到图片信息写入数据库中,这里同时将图片显示在此页面上(商品回显),这个可以利用ajax来完成。...,接下来我们需要完成是点击选择图片按钮上传图片功能,在此我们使用ajax将图片上传到服务器端并将图片回显到按钮上方。...上传图片,从服务器端获取图片地址,然后将图片地址追加到src属性中即可 function fileChange(){

3.3K30

SpringMVC框架之第四篇

下面将介绍使用Spring MVC统一处理异常解决和实现过程。...6.1.服务器端配置文件访问服务 上传图片应该在画面上显示出来,web页面中访问一个图片是使用一个url。...6.2.1.前台上传图片显示 jsp页面中,form【enctype="multipart/form-data"】属性,作用是表示该表单可以提交多媒体文件,比如图片 修改【editItem.jsp...因为在当今实际项目中,都采用js端上传插件,图片选择完成直接上传,后台需要提前编写一个独立Controller类并定义一个方法来处理上传,直接保存到文件服务器,然后返回对应url给页面。...图片上传部分我们已经说了,当今实际项目的图片上传是通过js插件做

67510

【1024程序员节】RestFul,mvc拦截器,SSM基本整合-学习笔记

mvc 拦截器 3.1 概述 spring mvc拦截器相当于 java web filter 处理器执行过程中,进行拦截或处理 preHandler 拦截器处理前方法,如果返回true继续执行,...3.2 入门案例 3.3 多拦截器 执行流程 多拦截器拦截顺序,就是配置类中配置顺序。 4....SSM 整合:案例 4.1 需求 用户增删改查 SSM:spring mvcspring、mybatis view:jsp (非重点) 4.2 环境搭建 4.3 导入配置类 创建对应目录结构...list 步骤5:list.jsp 页面展示数据(非重点) 4.4.3 实现 4.5 添加 4.5.1 需求 完成用户添加 4.5.2 步骤 步骤1:点击添加按钮,显示添加表单 步骤2:编写controller...,处理添加功能 添加成功,跳转到列表页面 添加失败,转发添加页面,提示错误信息 步骤3:编写service,完成添加 4.5.3 实现 步骤1:点击添加按钮,显示添加表单 1.1 list.jsp

20710

RestFul,mvc拦截器,SSM基本整合-学习笔记

mvc 拦截器 3.1 概述 spring mvc拦截器相当于 java web filter 处理器执行过程中,进行拦截或处理 preHandler 拦截器处理前方法,如果返回true继续执行,...3.2 入门案例 3.3 多拦截器 执行流程 多拦截器拦截顺序,就是配置类中配置顺序。 4....SSM 整合:案例 4.1 需求 用户增删改查 SSM:spring mvcspring、mybatis view:jsp (非重点) 4.2 环境搭建 4.3 导入配置类 创建对应目录结构...list 步骤5:list.jsp 页面展示数据(非重点) 4.4.3 实现 4.5 添加 4.5.1 需求 完成用户添加 4.5.2 步骤 步骤1:点击添加按钮,显示添加表单 步骤2:编写controller...,处理添加功能 添加成功,跳转到列表页面 添加失败,转发添加页面,提示错误信息 步骤3:编写service,完成添加 4.5.3 实现 步骤1:点击添加按钮,显示添加表单 1.1 list.jsp

22210

SSM学习笔记之SpringMVC

官方提供基于MVC设计理念web框架 Spring MVC是基于Servlet封装用于实现MVC控制框架,实现前端和服务端交互。...,可以根据需要进行配置  HandlerAdapter处理器适配器 作用:根据HandlerMapping解析用户请求产生调用链,通过适配器模式完成Handler调用 Handler控制器 由开发人员根据业务需求进行开发...创建SpringMVC配置文件 web.xml中配置SpringMVC前端控制器 web.xml中配置SpringMVC编码过滤器 配置静态资源处理策略 7.2 文件上传 案例:添加图书,同时提交图书封面图片...处理文件上传方法中定义一个MultipartFile类型对象,就可以接收图片了 package com.springMVCDemo.controller; import com.springMVCDemo.beans.Book...,而这种异常显示是没有必要, 因此我们可以服务器进行特定处理--当系统出现异常之后,呈现给用户一个统一可读提示页面 8.1 HTTP异常状态统一处理 HTTP Status 404

8.1K20

SpringMVC入门终结篇

方法,可以获得当前属性值出现全部错误,然后通过一个Model对象存储错误信息,放到隐含模型中 jsp页面通过${},从请求域中拿出之前存放错误信息,显示面上 自定义国际化错误消息显示,Hibernate...与@DateTimeFormat注解配合使用 jQueryeach()函数补充知识点 @ResponseBody注解将服务器端将对象以json对象形式返回,前端收到数据,显示面上 @ReuqestBody...3.页面进行内容替换 国际化必看注意事项 注意不能直接进入国际化页面中,因为直接进入某个jsp页面的时候,就相当直接向Tomcat请求页面,没有经过Spring,然而Spring管理国际化也就不会生效...return "redirect:/emps"; } } jsp页面通过${},从请求域中拿出之前存放错误信息,显示面上 <%@ page contentType...json对象形式返回,前端收到数据,显示面上 ajaxController: @Controller public class ajaxController { @Autowired

1.4K30

SpringMVC系列 MVC设计模式介绍+ SpringMVC作用及其基本使用+组件解析+注解解析

Spring-mvc [在这里插入图片描述] 什么是SpringMvc SpringMvc是一种基于java实现Mvc设计模式请求驱动类型轻量级web框架,属于SpringFrameWork后续产品...,已经融合在Spring Web Flow中 SpringMvc已经成为目前最主流MVC框架之一,并且随着Spring3.0发布,全面超越Struts2,成为最优秀mvc框架,他通过一套注解,一个简单...,是一种业务逻辑,数据与界面显示分离开来方法来组织代码,将众多业务逻辑整合到一个部件里,需要改进和个性化定制界面及用户交互同时,不需要重新编写业务逻辑,达到减少编码时间,提高代码复用性。...MVC三个部件中,模型拥有最多处理任务。...它只是接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示返回数据。 **图片解析** [在这里插入图片描述] 最典型MVC就是jsp+servlet+javabean模式。

2.9K20

计算机毕业设计答辩慌?软工本科 Java EE 毕设项目答辩问题、答案汇总指南奉上

7.7、如何实现对手机号正则校验? 7.8、注册/登陆验证码是如何实现? 7.9、图片上传功能如何实现? 7.10、图片全动态变化如何实现? 7.11、重定向和转发区别?...SpringMVC 是 Spring模块,它实现了 MVC 设计模式 web 框架,首先用户发出请求,请求到达 SpringMVC 前端控制器(DispatcherServlet),前端控制器根据用户...解决办法: 付款前再次校验库存,如确认订单要付款时再验证一次,并友好提示用户库存不足。 增加提示信息:商品详情,订单步骤页面提示不及时付款,不能保证有库存等。...所用技术是什么? https://www.cnblogs.com/YQian/p/11323443.html 7.9、图片上传功能如何实现? 问:你这个图片上传功能在后端是如何实现?...目的不同,重定向只是简单用户访问一个新链接,而转发是服务器要得到用户请求内容并需要进行一部分处理,所以两者目的之不同。 7.12、表升级如何实现?如何维护?

2K20
领券