JAVA全系列 教程
3762个小节阅读:7090.9k
目录
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
在新增产品时,我们还需要上传产品图片。我们采用异步上传的方法进行图片上传
在conmmon_resources.html
中引入jquery.form.js
修改product_add.html
页面
xxxxxxxxxx
<div class="col-md-2 title" style="height: 110px">产品图片</div>
<div class="col-md-8 data" style="height: 110px">
<form id="uploadPImage" enctype="multipart/form-data">
<input type="file" name="file" id="pImageFile">
</form>
</div>
<script>
$(function (){
$("#pImageFile").change(function (){
// 异步提交表单
$("#uploadPImage").ajaxSubmit({
url:"/backstage/product/upload",
type: "post",
success:function (result){
// 上传成功后,图片回显到pImage上
$("#pImage").attr("src",result.data[0]);
// 上传成功后,图片地址放入产品表单的隐藏域中
$("#hiddenPImage").val(result.data[0]);
}
})
})
})
</script>
<div class="col-md-2 data" style="height: 110px">
<img height="100" th:src="@{/backstage/img/no-img.png}" id="pImage">
</div>
<form th:action="@{/backstage/product/add}" method="post">
<input type="hidden" name="pImage" id="hiddenPImage">
</form>
启动项目,测试上传产品图片功能