當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2025/3/11 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了简单的ajax上传商品功能使用SevletFileUpload和FormData 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1、先上圖
2、使用ServletFileUpload讀取前端發(fā)送過(guò)來(lái)的請(qǐng)求
- 2.1、maven依賴
- 2.2、SevletFileUpload的一些基本操作
3、前端代碼
4、 Servlet
- 4.1、后端返回商品列表
- 4.2、添加商品
- 4.3、商品DAO層
- - 4.3.1、 ProductDao
  - 4.3.2、ProductDaoimpl

1、先上圖

2、使用ServletFileUpload讀取前端發(fā)送過(guò)來(lái)的請(qǐng)求

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 以二進(jìn)制字節(jié)流
進(jìn)行提交傳統(tǒng)接收參數(shù)的方式無(wú)效
DiskFileItemFactory:
void setSizeThreshold(int sizeThreshold) 設(shè)置緩沖區(qū)大小，默認(rèn)10KB 超出將使用臨時(shí)文件上傳
void setRepository(File repository) 設(shè)置臨時(shí)文件路徑
ServletFileUpload：核心操作類
public void setSizeMax(long sizeMax)設(shè)置總文件的大小
public void setFileSizeMax(long fileSizeMax)：設(shè)置單個(gè)文件的大小
public List<FileItem> parseRequest(javax.servlet.http.HttpServletRequest req) 解析請(qǐng)求正文內(nèi)容
public static boolean isMultipartContent(HttpServletRequest req)//判斷enctype
setProgressListener(new ProgressListener(function(三參數(shù)))) 具體內(nèi)容往下看
FileItem:輸入類:
void write(File file): write方法將FileItem對(duì)象中的內(nèi)容保存到某個(gè)指定的文件中。如果FileItem對(duì)象中的內(nèi)容是保存在某個(gè)臨時(shí)文件中，該方法完成后，臨時(shí)文件可以會(huì)被刪除。該方法也可以將普通表單字段保存在一個(gè)文件中，但最主要的用途是把上傳的文件內(nèi)容保存在本地文件系統(tǒng)中。
boolean isFormField()：判斷是否是普通字段

普通字段：

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

文件字段:

String getContentType() 獲得文件類型
String getName（）：獲取上傳文件名
InputStream getInputStream()以流的形式返回上傳文件的主體內(nèi)容
void delete（）刪除臨時(shí)文件

字段亂碼的問(wèn)題

普通字段可以使用item.getString(“GBK”)或者 new String(item.getString().getBytes(“iso-8859-1”),“utf-8”)
如果是文件名亂碼的話，就是設(shè)置request編碼 request.setCharacterEncoding(“utf-8”);

文件名重復(fù)問(wèn)題

一般采用UUID的randomUUID()來(lái)代替文件名防止亂碼

上傳進(jìn)度檢查

upload.setProgressListener(new ProgressListener(){
參數(shù)一：已上傳的字節(jié)數(shù)
參數(shù)二：總字節(jié)數(shù)
參數(shù)三:第幾項(xiàng)
@Override
public void update(long arg0, long arg1, int arg2) {
// TODO Auto-generated method stub
System.out.println(arg0+" "+arg1+" "+arg2);
}
});

3、前端代碼

form表單僅僅只是為了解決JavaScript設(shè)置請(qǐng)求頭multipart/form-data的邊界問(wèn)題，而不是為了用form表單來(lái)提交數(shù)據(jù)。所以我們需要將form表單的提交事件刪除。我們只需要設(shè)置onsubmit="return false;"這樣就可以使form表單的提交事件不起作用。我們使用FormData這個(gè)類來(lái)封裝表單中的數(shù)據(jù)，這個(gè)數(shù)據(jù)可以同時(shí)封裝文件和普通表單字段，以key,value的形式表示，其中key為表單中設(shè)置的name屬性。

FormData的使用方法
在表單中key 就是屬性name 的值
new FormData(表單對(duì)象) 直接封裝表單對(duì)象中的數(shù)據(jù)
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="請(qǐng)輸入商品名稱" class="product_name" name="product_name"></div><div><input type="text" placeholder="請(qǐng)輸入商品價(jià)格" 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>價(jià)格</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>價(jià)格</th><th>圖片路徑</th><th>delete</th></tr>`}function responsetable(){//請(qǐng)求后端返回商品列表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;/*** 查詢所有商品* 返回給主頁(yè)用于渲染商品*/ @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;/*** 前臺(tái)上傳商品信息和商品圖片* 解析信息與圖片*/ @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);} }

總結(jié)

以上是生活随笔為你收集整理的简单的ajax上传商品功能使用SevletFileUpload和FormData的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： php 获取 table,php – 获
下一篇：配置babel_Babel 7 下配置