基于ssm的图片上传和将图片入数据库同时实现图片的预览和前段展示

最新推荐文章于 2022-06-02 16:25:50 发布
最新推荐文章于 2022-06-02 16:25:50 发布
阅读量1k 收藏 5
点赞数
分类专栏： javaweb ssm mysql 文章标签： 基于ssm的图片上传和将图片入数据库同时实现图片的预览和前段展示 ssm 图片预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38978508/article/details/93413092
版权
在开发中图片上传用的比较多，所以这也是我们必会的一项的开发技能。直接上代码1、jsp这是一个整体的页面，实现信息的完善，重点的部分我已经加粗。图片实现预览实在js实现的，代码也加粗<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><%@ tagli...
摘要由CSDN通过智能技术生成

在开发中图片上传用的比较多，所以这也是我们必会的一项的开发技能。直接上代码
1、jsp
这是一个整体的页面，实现信息的完善，重点的部分我已经加粗。
图片实现预览实在js实现的，代码也加粗

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>

<head>
     <base href="<%=basePath %>" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>小白XBIT酒店</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="static/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="static/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="static/css/amazeui.min.css" />
    <link rel="stylesheet" href="static/css/admin.css">
    <link rel="stylesheet" href="static/css/app.css">
</head>

<body data-type="generalComponents">


  <header class="am-topbar am-topbar-inverse admin-header">
        <div class="am-topbar-brand">
            <a href="javascript:;" class="tpl-logo">
                <img src="static/img/logo.png" alt=&#
最低0.47元/天 解锁文章
1029179954
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ssm+jsp实现图片上传,以及解决一些常见问题
qq_40479674的博客
11-22 1557
#ssm+jsp实现图片上传,以及解决一些常见问题 平常商业项目中不免要做文件上传，像用户发送的图片，头像的上传等，本文就以头像的上传更新来讲述一下 话不多说，直接开干 一、前端 jsp: &amp;amp;lt;span class=&amp;quot;charactor&amp;quot; id=&amp;quot;userHeader&amp;quot;&amp;amp;gt; &amp;amp;lt;
读取数据库图片信息并在前端显示 SSM框架
qq_45969735的博客
12-10 2209
Controller层： @RequestMapping("/readimage") public void readimage(HttpServletResponse response){ try { FileInputStream picture = new FileInputStream(realPath); int i = picture.available(); .
SSM框架图片上传与显示
09-19
SSM框架图片上传与显示，mysql数据库。mysql文件在项目下db文件夹中
SSM实现图片的上传和前端展示—超详细版
yu980219的博客
04-27 7694
岁月悠悠，衰微只及肌肤；热忱抛却，颓唐必致灵魂 1. SSM配置 这里的重点在于文件的映射，很多人不理解。 在实际开发中，我们会把图片，视频文件等资源统一放到服务器的某个文件夹下便于管理。 不放在项目中的文件夹下，是因为如果每次项目重新打包部署，就会清空之前部署好的文件夹下的文件，非常不利于开发。 Q：那么映射是什么意思呢？ 我们在实际存放文件的文件夹中，和我们访问的路径做一个映射。 例如：<mvc:resources location=“D:/bbb/” mapping="/aaa/**"/&.
ssm框架上传图并显示
weixin_44899752的博客
06-02 1974
ssm框架上传图片并显示
基于ssm微信小程序宿舍报修系统源码数据库文档.zip
04-15
这是一个基于SSM（Spring、SpringMVC、MyBatis）框架和微信小程序开发的宿舍报修系统的源码和数据库文档。这个系统旨在提供一个便捷的线上报修平台，方便学生在宿舍遇到设施问题时，能够快速提交报修申请，同时方便...
基于ssm原创音乐小程序源码数据库文档.zip
04-15
【标题】: "基于SSM的原创音乐微信小程序源码及数据库文档" 【描述】: 这个资源是一个完整的毕业设计项目，它涉及到一个使用Java技术栈开发的微信小程序，专注于展示和播放原创音乐。核心技术是Spring Boot、Spring...
基于ssm家庭财务管理系统微信小程序源码数据库文档.zip
最新发布
04-16
这是一个关于使用Java、...总之，这个项目是Java开发者，尤其是对SSM和微信小程序感兴趣的开发者的一个宝贵资源，提供了从后端服务到前端展示的完整实现，有助于理解和掌握相关技术，并能实际应用于个人或商业项目中。
基于ssm+vue个人网站的设计与实现.zip
03-29
【标题】：“基于SSM+Vue个人网站的设计与实现” 这个项目的核心是构建一个个人网站，采用的技术栈是Spring、SpringMVC、MyBatis（SSM）后端框架和Vue.js前端框架。SSM是Java领域常用的Web开发组合，而Vue.js则是一...
SSM(Spring+SpringMvc+Mybatis)图片上传保存到数据库与回显+sql
10-31
基于SSM（Spring+SpringMvc+Mybatis）框架的图片上传并保存到数据库中与回显的案例
ssm上传图片以及回显图片
10-27
ssm上传图片以及回显图片源代码 自己亲手写的 供参考哦
SSM实例-文件上传和下载，存储信息到数据库
01-19
请先看实体类Attachment，按照其属性建表，再看attachment控制器，我的数据库是sql2005数据库，sql语句可能需要修改一下，请注意！如果要和我一样使用sqlserver数据库，需要先在微软官网下载依赖包（微软不支持Maven直接下载包），再把包放入Maven的本地仓库中，之后pom中导入（请按照pom中的路径放入文件夹，懂得也可以自己修改）
Javaweb应用图片文件上传并预览，数据库存储路径——ssm实现
02-20
Javaweb应用图片文件上传并预览，Tomcat服务器存储至磁盘，数据库mysql存储其图片路径
基于SSM+mysql框架，前后端分离的文件云平台项目.zip
08-29
这是一个基于Java SSM（Spring、SpringMVC、MyBatis）和MySQL数据库的前后端分离的文件云平台项目。SSM框架是Java开发中的常见选择，它提供了强大的服务层、控制层和数据访问层的解决方案，使得开发人员能够高效地...
SSM框架上传文件图片并回显到前端
qq_45780016的博客
04-14 2343
SSM框架上传文件图片并回显到前端
图片服务器——数据库设计和服务器API设计
qq_44929652的博客
03-19 1256
1.数据库设计 1)首先创建名为java_image-server的数据库 create database java_image_server; 2)创建名为image_table的表存储图片的属性信息 create table image_table(imageId int not null primary key auto_increment, imageName var...
ssm上传一张照片保存到数据库，上传时显示，在别的页面显示
dhyway的博客
05-31 670
前端 <form action="${pageContext.request.contextPath}/upload2" enctype="multipart/form-data" method="post"> <ul class="weui-uploader__files" id="ticketImages" > </ul> <div class="weui-uploader__input-box" > <inpu
文件存到本地---SSM配置Ueditor实现图片的上传
FromNowOnUntilTheEnd
02-22 1387
一般我们实现的图片自定义上传是将图片是上传到tomcat的目录之下，这样会出现一个问题，当你重新部署你的工程的时候，tomcat会将你的图片全部都清空，那么这样你将图片存到数据库当中将会变的毫无意义！接下来实现如何将图片存取在非tomcat的目录之下！！！ 1.修改文件输出的位置 [html] view plain copy @Contro
基于ssm vue 实现图片上传并预览的代码
05-05
以下是基于SSM和Vue实现图片上传并预览的代码示例： 前端代码： ``` <template> <div> <input type="file" ref="fileInput" accept="image/*" @change="handleFileUpload"> <img v-if="imageUrl" :src="imageUrl" style="max-width: 100%;"> </div> </template> <script> export default { data() { return { imageUrl: '', file: null } }, methods: { handleFileUpload() { this.file = this.$refs.fileInput.files[0]; this.previewImage(this.file); this.uploadFile(this.file); }, previewImage(file) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = e => { this.imageUrl = e.target.result; } }, async uploadFile(file) { const formData = new FormData(); formData.append('file', file); try { const response = await this.$axios.post('/upload', formData); console.log(response.data); } catch (error) { console.log(error); } } } } </script> ``` 后端代码： ``` @Controller public class UploadController { @PostMapping("/upload") @ResponseBody public String upload(@RequestParam("file") MultipartFile file) throws IOException { // 保存文件到服务器 File uploadFile = new File("/path/to/upload/" + file.getOriginalFilename()); file.transferTo(uploadFile); // 返回文件访问路径 return "http://your.domain.com/upload/" + file.getOriginalFilename(); } } ``` 其中，前端代码使用了Vue.js框架和axios库，后端使用了Spring MVC框架。在前端，我们使用`<input type="file">`元素来让用户选择上传的图片文件，然后使用FileReader API来预览图片；在上传文件时，我们将文件封装为FormData对象，并使用axios库发送POST请求到后端的/upload接口；在后端，我们使用Spring MVC框架的@RequestParam注解来接收上传的文件，并将文件保存到服务器上，最后返回文件的访问路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1029179954

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值