ssm框架实现图片上传显示并保存地址到数据库

本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片。

本项目是使用maven搭建的项目,首先看下项目结构

相关配置自行搜索,下边直接实现上传功能

1.创建数据库

DROP TABLE IF EXISTS `product`;
CREATE TABLE `product` (
  `pid` int(11) NOT NULL AUTO_INCREMENT,
  `pimage` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`pid`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of product
-- ----------------------------
INSERT INTO `product` VALUES (‘2‘, ‘6c648d82-dc29-4b92-855e-491741e092a21.jpg‘);
INSERT INTO `product` VALUES (‘3‘, ‘80f26905-7342-492c-be6e-c3f0ad81c2aa1.jpg‘);
INSERT INTO `product` VALUES (‘4‘, ‘c3d28f16-4b17-4568-8877-ff1fd4e514a31.jpg‘);
INSERT INTO `product` VALUES (‘5‘, ‘bb8070e8-5b3f-4be2-83d6-698dd6169dca‘);

  

2.创建商品实体类product

public class Product {
    private Integer pid;
    private String pimage;
    public Integer getPid() {
        return pid;
    }
    public void setPid(Integer pid) {
        this.pid = pid;
    }
    public String getPimage() {
        return pimage;
    }
    public void setPimage(String pimage) {
        this.pimage = pimage;
    }
    @Override
    public String toString() {
        return "Product [pid=" + pid + ", pimage=" + pimage + "]";
    }

3.创建ProductController

@Controller
public class ProductController {
    //注入ProductService
    @Autowired
    private ProductService productService;

    //查询所有用户
    @RequestMapping("/list.do")
    public String listUser( Model model){
        List<Product> list= productService.list();
        model.addAttribute("list",list);
        System.out.println(list);
        return "list";
    }

    /**
     * 保存商品
     * @param image
     * @param product
     * @param map
     * @return
     * @throws IOException
     */
    @RequestMapping("/addProduct.do")
    public String fileUpload(MultipartFile file,Product product, ModelMap map) throws IOException {

        /**
         * 上传图片
         */
        //图片上传成功后,将图片的地址写到数据库
        String filePath = "E:\\upload";//保存图片的路径
        //获取原始图片的拓展名
        String originalFilename = file.getOriginalFilename();
        //新的文件名字
        String newFileName = UUID.randomUUID()+originalFilename;     //封装上传文件位置的全路径
        File targetFile = new File(filePath,newFileName);      //把本地文件上传到封装上传文件位置的全路径
        file.transferTo(targetFile);
        product.setPimage(newFileName);

        /**
         * 保存商品
         */
        productService.save(product);
        return "redirect:/list.do";
    }
}

4.创建接口ProductService

package com.ssm.service;

import java.util.List;

import com.ssm.entity.Product;

public interface ProductService {

    List<Product> list();

    void save(Product product);

}

5.创建实现类ProductServiceImpl

@Service
@Transactional
public class ProductServiceImpl implements ProductService {
    //注入ProductMapper
    @Autowired
    private ProductMapper productMapper;

    @Override
    public List<Product> list() {

        return productMapper.list();
    }

    @Override
    public void save(Product product) {
        productMapper.save(product);
    }
}

6.创建Mapper接口

public interface ProductMapper {
    //保存商品
    void save(Product product);
    //查询商品
    List<Product> list();
}

7.创建Mapper.xml

<mapper namespace="com.ssm.mapper.ProductMapper">

      <!-- 添加 -->
    <insert id="save" parameterType="com.ssm.entity.Product" >
        insert into product(pimage) values (#{pimage})
    </insert> 

    <!-- 查询用户-->
    <select id="list" resultType="com.ssm.entity.Product">
        select * from product
    </select> 

</mapper>

8.首页index.jsp

<body>
    <form action="addProduct.do" method="post" enctype="multipart/form-data">
        图片:<input type="file" name="file">
        <input type="submit" value="提交">
    </form>
</body>

9.显示列表list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
    #images{
        width: 50px;
        height: 50px;
    }
</style>
</head>
<body>
    <table class="table table-bordered table-hover">
        <tr>
            <th>序号</th>
            <th>图片</th>
        </tr>
        <c:forEach items="${list}" var="product" >
            <tr>
                <th>${product.pid }</th>
                <th><c:if test="${product.pimage !=null }">
                    <img id="images" alt="" src="/image/${product.pimage }">
                </c:if> </th>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

最后说一下我的图片上传保存的位置是在本地,我是通过tomcat进行设置的,如下图:

图片上传过程完成。

DROP TABLE IF EXISTS `product`;CREATE TABLE `product` (  `pid` int(11) NOT NULL AUTO_INCREMENT,  `pimage` varchar(255) DEFAULT NULL,  PRIMARY KEY (`pid`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
-- ------------------------------ Records of product-- ----------------------------INSERT INTO `product` VALUES (‘2‘, ‘6c648d82-dc29-4b92-855e-491741e092a21.jpg‘);INSERT INTO `product` VALUES (‘3‘, ‘80f26905-7342-492c-be6e-c3f0ad81c2aa1.jpg‘);INSERT INTO `product` VALUES (‘4‘, ‘c3d28f16-4b17-4568-8877-ff1fd4e514a31.jpg‘);INSERT INTO `product` VALUES (‘5‘, ‘bb8070e8-5b3f-4be2-83d6-698dd6169dca‘);

原文地址:https://www.cnblogs.com/smfx1314/p/8641589.html

时间: 2024-10-09 23:59:25

ssm框架实现图片上传显示并保存地址到数据库的相关文章

基于nodeJs express 框架的图片上传和编辑(引用美图编辑工具)上传小示例

唉,由于近期工作中对于新知识的运用相对较少,也导致小码哥少有更新鄙人心得的机会.还望路过的基友们不要抱怨,勿喷,,,,, 本篇文章,是基于NodeJs Express框架完成的一个用于项目中图片上传和编辑上传的小示例,当然,由于项目工期不禁,都是在非工作时间慢慢完成的,导致至今该图片上传功能也未能插入项目中真正的验证最终效果.不过就小码哥感觉,基本思路及基本功能算是完成了. 下面便由小码哥来给基友们稍微讲解改功能的实现过程及其中用到的一些技术等等. 首先,说说NodeJs Express框架的搭

plupload简易应用 多图片上传显示预览以及删除

<script> var uploader = new plupload.Uploader({ //实例化一个plupload上传对象 browse_button: 'btnBrowse', url: 'upload.ashx', flash_swf_url: 'Resource/scripts/js/Moxie.swf', silverlight_xap_url: 'Resource/scripts/js/Moxie.xap', filters: { mime_types: [ //只允许上

Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现

简单三步实现图片无刷新上传:注意是上传,至于上传时的验证,比如图片的尺寸,大小,格式判断.限制等,自行解决. 兼容性想还不错:FF,CH,IE,猎豹,都是可以实现的.如果看到回显.当然就是成功了. 经历了好几天的不停的钻牛角尖,终于将这个二货弄出来了.真是煞费苦心啊.但是做出来的瞬间还是蛮开心的. 第一步:我们需要加载几个JS库. jquery库 jquery.form.js库 下载这两个库,并引用到页面中. 以下为页面中 JS 代码: function upload() { var optio

SSM框架之文件上传

1.导入文件上传的jar包 2.图片不是存在数据库中,而是存在某个目录下面,然后返回一个路径(找图片的路径) 数据库只需要保存该路径即可. 3.springmvc是支持文件上传的 在springMVC中配置文件上传,并限制文件上传的大小 这里一定要配置ID,并且ID的名字是固定的:multipartresolver 4.后台如何上传图片 1.获取图片数据 后台接收图片的时候需要用multipartresolverhttpservletrequest接口去接收该request 然后调用.getfi

ssm框架下文件上传

springmvc实现文件上传的步骤: 1.页面上,通过input来准备file组件,该标签,必须给定name属性值 同时,要求form表单必须给定一个属性:enctype="multipart/form-data" 2.在pom.xml文件中,添加文件上传的第三方工具: commons-fileupload-1.3.2.jar commons-io-2.2.jar 3.在app-springmvc.xml配置文件中,准备上传操作的对象:CommonsMultipartResolver

使用django + Pillow进行图片上传压缩格式保存时出错的处理

安装Pillow之前先安装好python-dev libzip-dev libjpeg8-dev libfreetype6-dev libpng12-dev 否则在用PIL(Pillow)进行上传图片压缩格式保存时会出错: encoder jpeg not available decoder zip not available sudo apt-get install python-dev libzip-dev libjpeg8-dev libfreetype6-dev libpng12-dev

图片上传时遇到的问题

今天在用ssm框架做图片上传的时候遇见一个问题: 后来检查发现是springMVC配置文件中遗漏了关于图片上传的配置文件 把上面的<bean>配置好就可以了: 顺便总结一下: 图片上传只需要记住三件事: 前台页面:(1)要用post请求:(2)别忘了在form表单中加入enctype="multipart/form-data" 后台controller层要这样写: 3.如果上面代码没问题,就检查一下springmvc配置文件;

springMVC框架下——通用接口之图片上传接口

我所想要的图片上传接口是指服务器端在完成图片上传后,返回一个可访问的图片地址. spring mvc框架下图片上传非常简单,如下 1 @RequestMapping(value="/uploadImg", method=RequestMethod.POST) 2 @ResponseBody 3 public String uploadImg(@RequestParam(value="img")MultipartFile img){ 4 File f = new Fi

图片上传js代码

/**图片上传  显示图片**/ function showGamePic(file,img){ var fimg=file.files[0]; var filter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|