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();
}
}
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
