ajax異步提交圖片文本信息
以上傳一個商品爲例：
會用到兩個jar包
commons-io-2.6-bin.tar.gz
commons-fileupload-1.4-bin.tar.gz
把這兩個導入到WEB-INF下的lib目錄中
html頁面的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/include.js"></script>
<script>
$(function () {
$("#release_form").submit(function (e) {
e.preventDefault(); //禁止刷新
const file = $("#upfile")[0].files[0];//獲得圖片路徑
const release_GoodsName = $("#release_GoodsName").val();//商品發佈的名字
const release_gNameIntroduce = $("#release_gNameIntroduce").val();//發佈的商品簡介
const release_price = $("#release_price").val();//發佈的商品的價格
const release_gIntroduce = $("#release_gIntroduce").val();//發佈的商品的介紹
const release_qq = $("#release_qq").val();//發佈的商品的聯繫方式
const release_cid = $("#release_cid").val();//發佈的商品的聯繫方式
let formData = new FormData();
formData.append("upfile", file);
formData.append("release_GoodsName", release_GoodsName);
formData.append("release_gNameIntroduce", release_gNameIntroduce);
formData.append("release_price", release_price);
formData.append("release_gIntroduce", release_gIntroduce);
formData.append("release_qq", release_qq);
formData.append("release_cid", release_cid);
$.post({
url: "goods/release",
dataType: "json",
async: false,
data: formData,
processData: false,
contentType: false,
success: function (data) {
console.log(data);
},
error: (err) => {
console.log(err);
}
})
});
});
</script>
</head>
<body>
<div id="header"></div>
<div class="user_login_register">
<form id="release_form" ENCTYPE="multipart/form-data" method="post">
<div class="form-group">
<label for="release_GoodsName">商品的名稱</label>
<input type="text" class="form-control" id="release_GoodsName" name="gName">
</div>
<div class="form-group">
<label for="release_gNameIntroduce">商品的簡介</label>
<input type="text" class="form-control" id="release_gNameIntroduce" name="gNameIntroduce">
</div>
<div class="form-group">
<label for="release_price">商品的價格</label>
<input type="text" class="form-control" id="release_price" name="price">
</div>
<div class="form-group">
<label for="release_gImg">File input</label>
<input id="upfile" class="form-control" accept="image/*" name="gImg" id="release_gImg" type="file"
value="上傳圖片"/><br>
</div>
<div class="form-group">
<label for="release_gIntroduce">商品的介紹</label>
<textarea class="form-control" id="release_gIntroduce" name="gIntroduce" rows="3"></textarea>
</div>
<div class="form-group"><label for="release_cid">商品的分類</label>
<select id="release_cid" name="release_cid" class="form-control">
<option value="1">手機</option>
<option value="2">電腦</option>
<option value="3">書籍</option>
<option value="4">化妝品</option>
<option value="5">其它</option>
</select></div>
<div class="form-group">
<label for="release_qq">賣家的聯繫方式</label>
<input type="text" class="form-control" id="release_qq" name="qq">
</div>
<div style="text-align: center;">
<input type="submit" style="border:1px green solid;" class="btn btn-default" name="submit" value="提交">
</div>
</form>
</div>
<div id="footer"></div>
</body>
</html>
javaServlet中的代碼
/**
* 用戶發佈商品信息
*
* @param request
* @param response
*/
public void release(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
request.setCharacterEncoding("utf-8");
AllGoodsPlus allGoodsPlus = new AllGoodsPlus();
//解析和檢查請求，是否是post方式，是否是二進制流格式
Boolean isMultipart = ServletFileUpload.isMultipartContent(request);
try {
//創建FileItemFactory對象
FileItemFactory factory = new DiskFileItemFactory();
//創建文件上傳的處理器
ServletFileUpload upload = new ServletFileUpload(factory);
//解析請求
List<FileItem> items = upload.parseRequest(request);
for (FileItem item : items) {
String fileName = item.getFieldName();
if (item.isFormField()) {
//普通的表單控件
String value = item.getString("utf-8");
//向AllGoods對象中封裝
if ("release_GoodsName".equals(fileName)) {
allGoodsPlus.setgName(value);//設置商品名稱
} else if ("release_gNameIntroduce".equals(fileName)) {
allGoodsPlus.setgNameIntroduce(value);//設置商品的名字簡介
} else if ("release_price".equals(fileName)) {
allGoodsPlus.setPrice(Double.parseDouble(value));//設置商品的價格
} else if ("release_gIntroduce".equals(fileName)) {
allGoodsPlus.setgIntroduce(value); // 設置商品的介紹
} else if ("release_qq".equals(fileName)) {
allGoodsPlus.setQq(value); //設置賣家的商品的聯繫方式
} else if ("release_cid".equals(fileName)){
allGoodsPlus.setCid(Integer.parseInt(value));
}
} else {
//上傳文件的控件
String RandomName = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(item.getName());
allGoodsPlus.setgImg("img/" + RandomName);
String path = super.getServletContext().getRealPath("/img");
item.write(new File(path, RandomName)); //把上傳的文件保存到某個文件中
}
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
allGoodsPlus.setGdate(sdf.format(new Date()));//設置發佈時間
allGoodsPlus.setUsername(((User) request.getSession().getAttribute("user")).getUsername());
//這時所有的信息都已封裝到了allGoodsPlus的對象中，傳到service去執行
int flag = service.release(allGoodsPlus);
writeValue(flag,response);
} catch (Exception e) {
e.printStackTrace();
}
}