前端页面上传多文件问题
H5页面JSjava代码
作为一个java开发，说不会前端html问题，有点假；但要是说自己会，那更假，本人就是。除了刚学时，了解一些html知识，但后来从事工作后，就没接触过了，最近接手项目的后台开发，也涉及后台页面。对着项目组长面，肯定说能做，但真做起来，想死的心都有了，在加上前端开发忙着上线，只能自己来弄，现在来记录一下。
H5页面
<!DOCTYPE html
>
<html xmlns
:th
="http://www.w3.org/1999/xhtml">
<meta charset
="utf-8">
<head th
:include
="include :: header">
<meta http
-equiv
="X-UA-Compatible" content
="IE=edge">
<meta name
="viewport" content
="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel
="stylesheet" href
="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<script type
="text/javascript" src
="https://cache.amap.com/lbs/static/addToolbar.js"></script
>
</head
>
<style type
="text/css">
html
, body
{
width
: 90%;
height
: 100%;
margin
: 0px
;
}
.map
{
height
: 100%;
width
: 90%;
float
: left
;
}
</style
>
<body
class="white-bg">
<div
class="wrapper wrapper-content animated fadeInRight ibox-content">
<form
class="form-horizontal m" id
="form-activity-add">
<div
class="form-group">
<label
class="col-sm-3 control-label ">停车场名：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="parkName" required
="required" id
="parkName"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label">经纬度：
</label
>
<div
class="col-sm-8">
<input
class="form-control" readonly
="readonly" type
="text" name
="lnglat" value
="具体坐标请在下方地图中点击"
id
="lnglat">
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">详细地址：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="address" id
="address"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">停车场介绍：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="parkIntro" id
="parkIntro"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">收费标准：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="costStandard" id
="costStandard"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">收费上限：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="upperStandard" id
="upperStandard"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">分成比例：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="profit" id
="profit"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">区域编码：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="areaCode" id
="areaCode"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">超时时间：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="freeTime" id
="freeTime"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">超时标准：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="text" name
="timeoutStandard" id
="timeoutStandard"/>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label">是否露天：
</label
>
<div
class="col-sm-8">
<div
class="radio radio-info radio-inline">
<input type
="radio" id
="radio1" name
="parkType" value
="11" checked
="">
<label
for="radio1">露天
</label
>
</div
>
<div
class="radio radio-danger radio-inline">
<input type
="radio" id
="radio2" name
="parkType" value
="10">
<label
for="radio2">地下
</label
>
</div
>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label">是否热门：
</label
>
<div
class="col-sm-8">
<div
class="radio radio-info radio-inline">
<input type
="radio" id
="radio3" name
="isHot" value
="11" checked
="">
<label
for="radio1">热门
</label
>
</div
>
<div
class="radio radio-danger radio-inline">
<input type
="radio" id
="radio4" name
="isHot" value
="10">
<label
for="radio2">冷门
</label
>
</div
>
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">停车场图片：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="file" name
="img" id
="files1">
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">停车场详情图片(多图
)：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="file" name
="file" multiple
="multiple" id
="files2">
</div
>
</div
>
<div
class="form-group">
<label
class="col-sm-3 control-label ">停车场分布图片(多图
)：
</label
>
<div
class="col-sm-8">
<input
class="form-control" type
="file" name
="file2" multiple
="multiple" id
="files3">
<!--<button type
="button" onclick
="comit()" class="btn btn-primary">提交
</button
>-->
</div
>
</div
>
<div
class="form-group">
<div
class="form-control-static col-sm-offset-9">
<!--<button type
="submit" class="btn btn-primary">提交
</button
>-->
<button type
="button" onclick
="comit()" class="btn btn-primary">提交
</button
>
<button th
:onclick
="'javascript:layer_close()'" class="btn btn-danger" type
="button">关闭
</button
>
</div
>
</div
>
</form
>
</div
>
<div th
:include
="include::footer"></div
>
<script src
="/ruoyi/system/park/add.js" th
:src
="@{/ruoyi/system/park/add.js}"></script
>
<!--引入高德地图js
-->
<script src
="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script
>
<script type
="text/javascript">
var map
= new AMap.Map("container", {
resizeEnable
: true,
zoom
: 10,
center
: [117.285, 31.8584],
});
map
.on('click', function (e
) {
document
.getElementById("lnglat").value
= e
.lnglat
.getLng() + ',' + e
.lnglat
.getLat()
});
var auto
= new AMap.Autocomplete({
input
: "tipinput"
});
AMap
.event
.addListener(auto
, "select", select
);
function select(e
) {
if (e
.poi
&& e
.poi
.location
) {
map
.setZoom(15);
map
.setCenter(e
.poi
.location
);
}
}
</script
>
</body
>
</html
>
JS
function comit() {
var formdata
= new FormData($("#form-activity-add")[0]);
$
.ajax({
url
: ctx
+ "park/uplode",
data
: formdata
,
type
: "post",
processData
: false,
contentType
: false,
success
: function (result
) {
if (result
.code
== 0) {
window
.parent
.location
.reload()
var index
= parent
.layer
.getFrameIndex(window
.name
);
parent
.layer
.close(index
);
}else {
alert(result
.msg
)
}
}
})
}
java代码
public Message
uplodeFile(@RequestParam(value
= "img") MultipartFile file
,
@RequestParam(value
= "file") MultipartFile fileList
[],
@RequestParam(value
= "file2") MultipartFile fileList2
[],
ParkEntity entity
, Model model
) {
System
.out
.println("进入上传方法中：" + entity
);
if (entity
== null
|| !StringUtils
.isNotEmpty(entity
.getParkName())
|| entity
.getCostStandard() == null
|| entity
.getLnglat() == null
) {
return Message
.error(1, "填写数据不全");
}
if (!file
.isEmpty()) {
String parkImg
= UploadFileUtils
.thumbnail(file
);
entity
.setParkImg(parkImg
);
}
String lnglat
= entity
.getLnglat();
if (lnglat
== null
) {
return Message
.error("未选择经纬度");
} else {
String
[] lt
= lnglat
.split(",");
if (lt
.length
!= 2) {
return Message
.error("未选择经纬度");
}
entity
.setLgt(lt
[0]);
entity
.setLat(lt
[1]);
}
System
.out
.println("成功添加新记录");
if (entity
.getParkId()!= null
){
iParkService
.updateById(entity
);
}else {
entity
.setCreateTime(new Date());
iParkService
.save(entity
);
}
List
<Long> picIds
= new ArrayList<>();
List
<Long> phoIds
= new ArrayList<>();
if (fileList
!= null
&& fileList
.length
!= 0) {
picIds
= attachService
.uplodeMore(Arrays
.asList(fileList
));
model
.addAttribute("ids", picIds
);
}
if (fileList2
!= null
&& fileList2
.length
!= 0){
System
.out
.println("第二种文件上传");
phoIds
= attachService
.uplodeMore(Arrays
.asList(fileList2
));
model
.addAttribute("ids", phoIds
);
}
iParkService
.update(entity
,picIds
,phoIds
);
return Message
.success();
}
如上面代码，主要需求就是在form表单中同时传递文件1，多文件2，多文件3，以及实体信息。之前的开发模式是form表单提交实体信息就行，传递方式也是KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲form-id").seria…("#form-id")[0])，ajax上传。 这份文档也是用来当学习笔记的，希望对路过的人有些帮助
