1、先上图

在这里插入图片描述

2、使用ServletFileUpload读取前端发送过来的请求

2.1、maven依赖

maven依赖

	<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency>

2.2、SevletFileUpload的一些基本操作

SevletFileUpload的一些基本操作
1.form表单的method必须是post
2.form表单的enctype必须是multipart/form-data 以二进制字节流
进行提交传统接收参数的方式无效
DiskFileItemFactory:
void setSizeThreshold(int sizeThreshold) 设置缓冲区大小，默认10KB 超出将使用临时文件上传
void setRepository(File repository) 设置临时文件路径
ServletFileUpload：核心操作类
public void setSizeMax(long sizeMax)设置总文件的大小
public void setFileSizeMax(long fileSizeMax)：设置单个文件的大小
public List<FileItem> parseRequest(javax.servlet.http.HttpServletRequest req) 解析请求正文内容
public static boolean isMultipartContent(HttpServletRequest req)//判断enctype
setProgressListener(new ProgressListener(function(三参数))) 具体内容往下看
FileItem:输入类:
void write(File file): write方法将FileItem对象中的内容保存到某个指定的文件中。如果FileItem对象中的内容是保存在某个临时文件中，该方法完成后，临时文件可以会被删除。该方法也可以将普通表单字段保存在一个文件中，但最主要的用途是把上传的文件内容保存在本地文件系统中。
boolean isFormField()：判断是否是普通字段

普通字段：

String getFieldName（）：获取普通字段的字段名
String getString（）：获取普通字段的值

文件字段:

String getContentType() 获得文件类型
String getName（）：获取上传文件名
InputStream getInputStream()以流的形式返回上传文件的主体内容
void delete（）删除临时文件

字段乱码的问题

普通字段可以使用item.getString(“GBK”)或者 new String(item.getString().getBytes(“iso-8859-1”),“utf-8”)
如果是文件名乱码的话，就是设置request编码 request.setCharacterEncoding(“utf-8”);

文件名重复问题

一般采用UUID的randomUUID()来代替文件名防止乱码

上传进度检查

upload.setProgressListener(new ProgressListener(){
参数一：已上传的字节数
参数二：总字节数
参数三:第几项
@Override
public void update(long arg0, long arg1, int arg2) {
// TODO Auto-generated method stub
System.out.println(arg0+" "+arg1+" "+arg2);
}
});

3、前端代码

form表单仅仅只是为了解决JavaScript设置请求头multipart/form-data的边界问题，而不是为了用form表单来提交数据。所以我们需要将form表单的提交事件删除。我们只需要设置onsubmit="return false;"这样就可以使form表单的提交事件不起作用。我们使用FormData这个类来封装表单中的数据，这个数据可以同时封装文件和普通表单字段，以key,value的形式表示，其中key为表单中设置的name属性。

FormData的使用方法
在表单中key 就是属性name 的值
new FormData(表单对象) 直接封装表单对象中的数据
append(String key,String value) 添加属性
set(String key,String value)修改属性
delete(String key) 删除属性

<body>
<div class="insert"><form enctype="multipart/form-data" onsubmit="return false;" id="form1"><div><input type="text" placeholder="请输入商品名称" class="product_name" name="product_name"></div><div><input type="text" placeholder="请输入商品价格" class="price" name="price"></div><div><label for="file">上传图片</label><input type="file" hidden="hidden" id="file" name="imgurl"></div><div class="btn">添加</div></form></div>
<table><tr><th>商品名称</th><th>价格</th><th>图片路径</th><th>delete</th></tr>
</table>
</body>
<script>var table = document.querySelector("table");var btn=document.querySelector(".btn");var name=document.querySelector(".product_name");var price=document.querySelector(".price")var file=document.querySelector("#file");function  cleartable() {table.innerHTML=`<tr><th>商品名称</th><th>价格</th><th>图片路径</th><th>delete</th></tr>`}function responsetable(){//请求后端返回商品列表var xmlHttpRequest = new XMLHttpRequest();xmlHttpRequest.open("POST","productbgServlet",true);xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlHttpRequest.send();xmlHttpRequest.onreadystatechange=function () {var Text = xmlHttpRequest.responseText;var data = JSON.parse(Text);console.log(data);cleartable();data.forEach(function (item,index) {if(xmlHttpRequest.status==200 &&xmlHttpRequest.readyState==4){var tr = document.createElement("tr");tr.innerHTML+=`<td>${item.product_name}</td><td>${item.price}</td><td>${item.imgurl}</td><td class="del">删除</td>`table.appendChild(tr);}})}}window.onload=function () {responsetable();}btn.onclick=function () {//添加商品var formData = new FormData(document.querySelector("#form1"));var xhr=new XMLHttpRequest();xhr.open("POST","insertProductServlet",true)xhr.send(formData)xhr.onreadystatechange=function () {if(xhr.status==200 && xhr.readyState==4){var responseText = xhr.responseText;console.log(responseText);if(responseText=="true"){responsetable();}else if(responseText=="false"){alert("插入失败")}}}}
</script>

4、 Servlet

4.1、后端返回商品列表

package com.Servlet;import com.DAO.Impl.ProductDaoimpl;
import com.DAO.ProductDao;
import com.domain.product;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;/*** 查询所有商品* 返回给主页用于渲染商品*/
@WebServlet("/productPageServlet")
public class productPageServlet extends HttpServlet {@Overridepublic void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {ProductDao productDao=new ProductDaoimpl();final List<product> products = productDao.selAll();GsonBuilder builder=new GsonBuilder();final Gson gson = builder.create();final String json= gson.toJson(products);
//        System.out.println(json);response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();out.write(json);out.close();}
}

4.2、添加商品

package com.Servlet;import com.DAO.Impl.ProductDaoimpl;
import com.DAO.ProductDao;
import com.domain.product;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;/*** 前台上传商品信息和商品图片* 解析信息与图片*/
@WebServlet("/insertProductServlet")
public class insertProductServlet extends HttpServlet {@Overridepublic void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {ProductDao productDao=new ProductDaoimpl();request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");response.setCharacterEncoding("utf-8");final PrintWriter out = response.getWriter();final DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload fileUpload=new ServletFileUpload(factory);fileUpload.setHeaderEncoding("utf-8");Map<String,String> map=new HashMap<>();final boolean flag = fileUpload.isMultipartContent(request);//判断是否encType="multipart/form-data"System.out.println(flag);try{final List<FileItem> fileItems = fileUpload.parseRequest(request);System.out.println(fileItems);for(FileItem item:fileItems){if(item.isFormField()){//不是文件上传map.put(item.getFieldName(),new String(item.getString().getBytes("iso-8859-1"),"utf-8"));}else{final InputStream inputStream = item.getInputStream();final String contentType = item.getContentType();System.out.println(contentType);String wjj=request.getServletContext().getRealPath("res/productimg");//文件夹路径String filename= item.getName();String name= UUID.randomUUID()+filename.substring(filename.indexOf("."),filename.length());String url=wjj+"/"+name;url=url.substring(url.indexOf("res"),url.length());map.put("imgurl",url);System.out.println(name);final FileOutputStream fileOutputStream = new FileOutputStream(wjj+"/"+name);byte[] bytes=new byte[1024];int len=0;while((len=inputStream.read(bytes))!=-1){fileOutputStream.write(bytes,0,len);}}}}catch (Exception e){e.printStackTrace();}System.out.println(map);final product product = new product(map.get("product_name"),map.get("price"),map.get("imgurl"));if(productDao.insert(product)==1){out.write("true");}else{out.write("false");}}
}

4.3、商品DAO层

4.3.1、 ProductDao

package com.DAO;import com.domain.product;import java.util.List;public interface ProductDao {List<product> selAll();int insert(product p);int delOne(String id);}

4.3.2、ProductDaoimpl

package com.DAO.Impl;import com.DAO.ProductDao;
import com.domain.product;
import com.jdbc.jdbcUtil;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;public class ProductDaoimpl implements ProductDao {static private Connection conn = jdbcUtil.conn;static private PreparedStatement pst = null;@Overridepublic List<product> selAll() {List<product> list=new ArrayList<>();try{pst=conn.prepareStatement("select *from product");final ResultSet resultSet = pst.executeQuery();while(resultSet.next()){list.add(new product(resultSet.getString(1),resultSet.getString(2),resultSet.getString(3),resultSet.getString(4)));}}catch (Exception e){e.printStackTrace();}return list;}@Overridepublic int insert(product p) {try{pst=conn.prepareStatement("insert into product values(null,?,?,?)");pst.setString(1,p.getProduct_name());pst.setString(2,p.getPrice());pst.setString(3,p.getImgurl());final int i = pst.executeUpdate();return i;}catch ( Exception e){e.printStackTrace();}return 0;}@Overridepublic int delOne(String id) {return 0;}public static void main(String[] args) {
//        final List<product> products = new ProductDaoimpl().selAll();
//        System.out.println(products);}
}