图片上传到本地并写入数据库"/>
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.multipartmons.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;}@Overridepublic 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 mapperPUBLIC "-//mybatis//DTD Mapper 3.0//EN"".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 {@Autowiredprivate 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=".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才能识别到本地的路径。
更多推荐
ssm框架图片上传到本地并写入数据库
发布评论