简单的ajax上传商品功能使用SevletFileUpload和FormData

最新推荐文章于 2021-09-28 22:30:35 发布

锋君

最新推荐文章于 2021-09-28 22:30:35 发布

阅读量252

点赞数

文章标签： java javascript html5 ajax

本文链接：https://blog.csdn.net/xiuyuandashen/article/details/106097988

版权

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 {
    @Override
    public 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 {
    @Override
    public 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;
    @Override
    public 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;
    }

    @Override
    public 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;
    }

    @Override
    public int delOne(String id) {
        return 0;
    }

    public static void main(String[] args) {
//        final List<product> products = new ProductDaoimpl().selAll();
//        System.out.println(products);
    }
}

锋君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的ajax上传商品功能使用SevletFileUpload和FormData

目录1、先上图2、使用ServletFileUpload读取前端发送过来的请求2.1、maven依赖2.2、SevletFileUpload的一些基本操作前端代码Servlet后端返回商品列表添加商品商品DAO层ProductDaoProductDaoimpl1、先上图2、使用ServletFileUpload读取前端发送过来的请求2.1、maven依赖maven依赖 <dependency> <groupId>commons-fileupload<
复制链接

扫一扫