fileUpload实现普通表单和file图片上传到数据库

效果图：
实现
- jsp:页面
- servelt:控制器
- service:逻辑操作
- dao:数据库操作
- domain：javaBean类

首先需要去apache 官网下载commons-fileupload和 commons-io 下载这两个jar包

下载步骤：fileUpload的commons-fileupload和 commons-io 下载

效果图：

表单提交：

数据库：

实现

jsp:页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><link rel="stylesheet" href="publish.css"><script src="js/jquery-3.2.1.min.js"></script><script>$(function () { //加载页面完成后$("#file_upload").change(function () { // 选择图片后即时在页面显示var $file = $(this);var fileObj = $file[0];var windowURL = window.URL || window.webkitURL;var dataURL;var $img = $("#img_show");if (fileObj && fileObj.files && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]);$img.attr('src', dataURL);} else {dataURL = $file.val();var imgObj = document.getElementById("img_show");imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;}});});function open_file() { //点击 + 字体图标，触发文件点击事件document.getElementById("file_upload").click();}</script>
</head>
<body class="body_img">
<img src="img/logom2.png" class="img_logo_pub">
<div class="pb_box"><div class="pb_box_z"><form action="${pageContext.request.contextPath}/publishServlet" method="post" autocomplete="off" enctype="multipart/form-data"><table <%--border="1"--%> class="table_pb"><tr><td class="two_right"><label for="product_name">商品名称：</label></td><td><input type="text" name="name" id="product_name" class="name"><%--隐藏的uid表单，上传发布用户的id--%><input type="text" name="uid" value="2" style="display:none"></td></tr><tr><td class="two_right"><label for=""></label>成色：</td><td> <select class="select grade" name="level"><option value="5成新">5成新</option><option value="6成新">6成新</option><option value="7成新">7成新</option><option selected value="8成新">8成新</option><option value="9成新">9成新</option><option value="全新">全新</option></select></td></tr><tr><td class="two_right"><label for=""></label>单价：</td><td> <input type="text" name="pricenow" id="" class="price price_now">￥</td></tr><tr><td class="two_right"><label for="">  原价：</label></td><td><input type="text" name="priceold" id="" class="price price_old">￥</td></tr><tr><td class="two_right"><label for=""></label>数量：</td><td> <input type="text" name="count" id="" class="sum"></td></tr><tr><td class="text_td two_right"><label for=""></label>商品详情：</td><td> <textarea class="textarea" name="remark"></textarea></td></tr><tr><td class="two_right">分类：</td><td> <select class="select " name="sort"><option value="数码">数码</option><option value="图书影音">图书影音</option><option value="内衣">内衣</option><option selected value="户外运动">户外运动</option><option value="茶酒">茶酒</option><option value="美食">美食</option></select></td></tr><tr><td class="img_td two_right"><label for=""></label>图片：</td><td><%--隐藏文件表单--%><input type="file" name="file_img" id="file_upload" style="display:none"><a href="#" onclick="open_file();" class="font_a"><span class="iconfont font_img"></span></a><%--用于图片回显--%><img src="${pageContext.request.contextPath}/${imgUrl}" id="img_show"  height="180px"><div> <input type="submit" name="submit" class="submit_pb" value="提交"></div></td></tr></table></form></div>
</div>
</body>
</html>

servelt:控制器

package cn.pqy.web.servlet;import cn.pqy.domain.CommodityBean;
import cn.pqy.service.CommodityService;
import cn.pqy.service.impl.CommodityServiceImpl;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.List;/*** @author panqiyi* @date 2021/5/15 - 21:33*/
@WebServlet("/publishServlet")
public class PublishServlet extends HttpServlet {CommodityBean commodityBean=new CommodityBean();protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//因为表单enctype="multipart/form-data"上传为二进制数据，request.getParameter()就无法提取到表单参数值了String imgUrl = null;  //存储到数据库的图像路径String imgFileName="image";  //web中存储图片的文件夹//判断上传表单是否为multipart/form-data类型if (ServletFileUpload.isMultipartContent(request)){//1、创建DiskFileItemFactory对象，作用是 设置缓存大小以及临时文件保存位置.DiskFileItemFactory factory = new DiskFileItemFactory();//2、创建一个上传工具，指定使用缓存区与临时文件存储位置. 并设置上传文件大小限制ServletFileUpload sfu = new ServletFileUpload(factory);sfu.setSizeMax(10*1024*1024); // 1024byte=1kb 1024kb=1M; 设置不能超过10M//3、解决上传文件中文名称乱码sfu.setHeaderEncoding("utf-8");//4、ServletFileUpload.parseRequest()方法解析request对象，// 得到所有上传项对象的list.每一个FileItem就相当于一个上传项try {List<FileItem> fileItems = sfu.parseRequest(request);//遍历list，每迭代一个FileItem对象，调用isFormFile方法判断是否是上传文件for (FileItem fileItem : fileItems) {System.out.println(fileItem);if (fileItem.isFormField()){//普通表单，则调用方法processFromField(fileItem);}else {//file类型表单String fileName = fileItem.getName();  //上传文件名称System.out.println("原文件名："+fileName);String suffix = fileName.substring(fileName.lastIndexOf('.')); //获取文件后缀名System.out.println("后缀名："+suffix); // .jpg//新文件名，唯一（时间戳）String newFileName = new Date().getTime() + suffix;System.out.println("新文件名："+newFileName);//写入文件到web服务器：//文件存储位置ServletContext context = this.getServletContext();// 获取绝对路径目录(D:\PRoject\JavaWeb\out\artifacts……)String serverPath = context.getRealPath("")+imgFileName;System.out.println(serverPath);// 如果文件夹不存在则创建File headFile = new File(serverPath);if (!headFile.exists()) {headFile.mkdirs();}//将图片存储到文件夹（serverPath：目录 ；newFileName：文件名）File image = new File(serverPath, newFileName);//将上传文件写到服务器上指定文件夹fileItem.write(image);//调用FileItem的delete()方法，删除临时文件fileItem.delete();//将图片路径（imgUrl）存储到数据库// 拼接相对相对路径imgUrl=imgFileName+"/"+newFileName;System.out.println(imgUrl);//存储图片路径到bean对象commodityBean.setImage(imgUrl);}}System.out.println(commodityBean);//调用service存储表单数据到数据库CommodityService service=new CommodityServiceImpl();int n = service.addCommodity(commodityBean);if (n>0){//存储成功//存储图片地址到request，用于页面回显request.setAttribute("imgUrl",imgUrl);request.getRequestDispatcher("/publish.jsp").forward(request,response);}} catch (FileUploadException e) {e.printStackTrace();} catch (Exception e) {e.printStackTrace();}}}//普通表单，给bean对象设置值 的方法private void processFromField(FileItem fileItem) throws UnsupportedEncodingException {String fieldName = fileItem.getFieldName();                  //字段名 nameString fieldValue = fileItem.getString("UTF-8");    //字段值 valueif ("name".equals(fieldName)) {commodityBean.setNaem(fieldValue);}if ("level".equals(fieldName)) {commodityBean.setLevel(fieldValue);}if ("pricenow".equals(fieldName)) {commodityBean.setPricenow(Double.parseDouble(fieldValue));}if ("priceold".equals(fieldName)){commodityBean.setPriceold(Double.parseDouble(fieldValue));}if ("count".equals(fieldName)){commodityBean.setCount(Integer.parseInt(fieldValue));}if ("remark".equals(fieldName)){commodityBean.setRemark(fieldValue);}if ("sort".equals(fieldName)){commodityBean.setSort(fieldValue);}if ("uid".equals(fieldName)){commodityBean.setUid(Integer.parseInt(fieldValue));}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

service:逻辑操作

接口：

public interface CommodityService {/*** 商品发布信息* @param comm* @return*/int addCommodity(CommodityBean comm);
}

实现类：

public class CommodityServiceImpl implements CommodityService {CommodityDao dao=new CommodityDaoImpl();@Overridepublic int addCommodity(CommodityBean comm) {int n = dao.addCommodity(comm);return n;}
}

dao:数据库操作

接口：

public interface CommodityDao {/*** 商品发布信息* @param comm* @return*/int addCommodity(CommodityBean comm);
}

实现类：

public class CommodityDaoImpl implements CommodityDao {private JdbcTemplate template=new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic int addCommodity(CommodityBean comm) { //添加数据到商品表String sql="insert into commodity values(null,?,?,?,?,?,?,?,?,?)";int n = template.update(sql, comm.getNaem(),comm.getLevel(),comm.getRemark(),comm.getPricenow(),comm.getPriceold(),comm.getCount(),comm.getSort(),comm.getUid(),comm.getImage());return n;}
}

domain：javaBean类

public class CommodityBean {private int id;  //主键private String naem; //商品名称private String level; //成色private String remark;  // 详情private double pricenow;  //价格private double priceold;  //原价格private int count;  // 数量private String sort;  //类别private int uid;  //发布的用户idprivate String image;  //商品图片地址//省略get/set和toString}

fileUpload实现普通表单和file图片上传到数据库相关推荐

easyui 表单提交与图片上传,图片添加、删除
提交表单和图片是web中经常要用到的.我这里用easyui做了一个表单,里面可以上传多张图片,并且可以进行新增和删除. 前端代码如下: <!DOCTYPE html> <html&g ...
uniapp实现表单提交带图片上传在做表单提交的时候，我们可能面临有图片上传，放在原生的html就好解决，form标签加上
enctype="multipart/form-data" uniapp微信小程序 1.原图页面部分 <form :model="data" @subm ...
JS同时上传表单图片和表单信息并把上传信息存入数据库，带php后端源码
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 利用JQ,jquery.form.js,bootstrap实现上传表单图片和表单信息并把上传的图片地址,inp ...
ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...
java序列化表单同步请求_Ajax serialize() 表单进行序列化方式上传文件
通过传统的 form 表单提交的方式上传文件上传文件: 不过传统的 form 表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用 Ajax 的方式进行请求的. 使用 ...
安卓机 input file图片上传无反应解决方案
安卓机 input file 图片上传无反应解决方案: <input id="btnUpload" type="file" /> 加上以下三个属性就 ...
asp如何将图片文件上传到mysql数据库中_怎样才能利用ASP把图片上传到数据库
欢迎来到小编的文章进行学习阅读,想必大家又有很多问题吧,在这里会有你想要收获的答案,请大家慢慢学习吧! ASP(Active Server Pages)是Microsoft很早就推出的一种WEB应用程 ...
mysql如何上传照片_MySQL数据库之图片上传存储数据库的２种方法讲解（Mysql）
本文主要向大家介绍了MySQL数据库之图片上传存储数据库的2种方法讲解(Mysql) ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. 数据库Mysql存储,读取图片在项目中,很 ...
base64转file图片上传
在微信公众号开发过程中,有可能会碰到这种情况,手写签字生成图片,或者页面生成图片等等,然后需求是将图片上传,一般上述情况都是由canvas转成的图片,格式都是base64类型的图片,而我们的上传接口一 ...

fileUpload实现普通表单和file图片上传到数据库

fileUpload实现普通表单和file图片上传到数据库

效果图：

实现

jsp:页面

servelt:控制器

service:逻辑操作

dao:数据库操作

domain：javaBean类

fileUpload实现普通表单和file图片上传到数据库相关推荐

最新文章

热门文章