ssm框架图片上传到本地并写入数据库

ssm框架图片上传到本地

注：这里ssm框架搭建就不说了，直接来讲图片上传功能

先上图

1、在pom.xml文件下引入所需要的包。

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

2、在spring-mvc.xml 也就是配置servlet的地方配置文件解析器

<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
    <property name="maxUploadSize" value="104857600"/>
    <property name="defaultEncoding" value="utf-8"/>
    <property name="maxInMemorySize" value="40960"/>
</bean>

3、创建图片类

package com.lzw.bean;

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 + "]";
    }
	public Product(String pimage) {
		super();
		this.pimage = pimage;
	}
}

4、创建对应的Dao接口

package com.lzw.dao;

import java.util.List;

import com.lzw.bean.Product;

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

5、创建对应的Mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
	<mapper namespace="com.lzw.dao.ProductDao">
		  <!-- 添加 -->
    <insert id="add" parameterType="com.lzw.bean.Product" >
        insert into product(pimage) values (#{pimage})    
    </insert> 
    
    <!-- 查询用户-->
    <select id="list" resultType="com.lzw.bean.Product">
        select * from product
    </select> 
	
	</mapper>

6、创建对应的Service类

package com.lzw.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.lzw.bean.Product;
import com.lzw.dao.ProductDao;

@Service
public class ProductService {
	@Autowired
    private ProductDao productDao;
    
    public List<Product> list() {
        
        return productDao.list();
    }

    public void add(Product product) {
    	productDao.add(product);
    }
}

7、创建对应的Controllor处理方法

 public Msg oneFileUpload(  
            @RequestParam("file") CommonsMultipartFile file,  
            HttpServletRequest request, ModelMap model) throws IOException {  
  
        // 获得原始文件名  
        String fileName = file.getOriginalFilename();
        
        System.out.println("原始文件名:" + fileName);  
  
        
     // 新文件名  
        String newFileName = "test.jpg";  
  
        // 获得项目的路径  
        //ServletContext sc = request.getSession().getServletContext();  
        // 上传位置  
       // String path = sc.getRealPath("/img") + "/"; // 设定文件保存的目录  
        String path = "D:/photo/lzw";
        File f = new File(path);  
        if (!f.exists())  
            f.mkdirs();  
        if (!file.isEmpty()) {  
            try {  
                FileOutputStream fos = new FileOutputStream(path +'/'+ newFileName);  
                InputStream in = file.getInputStream();  
                int b = 0;  
                while ((b = in.read()) != -1) {  
                    fos.write(b);  
                } 
                fos.close();  
                in.close();  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
        }  
  
        System.out.println("上传图片到:" + path +'/'+ newFileName);  
        // 保存文件地址，用于JSP页面回显  
        model.addAttribute("fileUrl", path +'/'+ newFileName);  
        
        String src = path +'/'+ newFileName;
        Product p = new Product("/photos/"+newFileName);
        p.setPimage("/photos/"+newFileName);

8、创建前端页面来测试

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


</head>
<body>
	 <form id="form" method="post" enctype="multipart/form-data">
            <p>请选择要上传的文件:</p>
            <input id="file" name="file" type="file" multiple="multiple"/>
            <br>
            
        </form>
       <button id ="upload" >检测</button>
 <!-- 引用百度jQuery -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#upload").click(function () {
       var formData = new FormData($('#form')[0]);//获取表单中的文件
       //alert("666");
       //ajax请求
       $("#imglist").empty();
       $.ajax({
           url:"${WEB_PATH}/addProduct.do",//后台的接口地址
           type:"post",//post请求方式
           data:formData,//参数
           cache: false,
           processData: false,
           contentType: false,
           success:function (result) {
               //alert("ok");
        	   var urlList = result.extend.url;
               $.each(urlList,function(index,item){
	            	//alert(item);
	   				var img = $("<img></img>").attr("src",item);
	   				var div = $("<div></div>").addClass("swiper-slide");
	   				
   			   });
               
           },error:function () {
               alert("操作失败~");
           }
       })
});
</script>
</body>
</html>

9、设置路径---》双击tomcat--》点击Modules--》点击添加直接的路径第一个是虚拟路径第二个是本地路径这样tomcat才能识别到本地的路径。

代码敌敌畏

发布了89 篇原创文章 · 获赞 58 · 访问量 8万+

私信关注

ssm框架图片上传到本地并写入数据库

ssm框架图片上传到本地

猜你喜欢