HTML (使用了bootstrap3样式)
1 <form class="form-horizontal" role="form" id="siteForm"> 2 <div class="form-group"> 3 <label for="siteTitle" class="col-sm-2 control-label">景点名称</label> 4 <div class="col-sm-5"> 5 <input type="text" class="form-control" id="siteTitle" name="siteTitle"> 6 </div> 7 </div> 8 <div class="form-group"> 9 <label for="siteProvince" class="col-sm-2 control-label">景点所在省份</label> 10 <div class="col-sm-5"> 11 <select class="form-control" id="siteProvince" name="province" onchange="doProvAndCityRelation(this)"> 12 <option value='-1'>请选择省份</option> 13 </select> 14 </div> 15 </div> 16 <div class="form-group"> 17 <label for="siteCity" class="col-sm-2 control-label">景点所在城市</label> 18 <div class="col-sm-5"> 19 <select class="form-control" id="siteCity" name="city"> 20 <option value='-1'>请选择城市</option> 21 </select> 22 </div> 23 </div> 24 <div class="form-group"> 25 <label for="picturePath" class="col-sm-2 control-label">景点图片</label> 26 <div class="col-sm-5"> 27 <input type="file" class="form-control" id="picturePath" name="file"> 28 </div> 29 </div> 30 <div class="form-group"> 31 <label for="siteDescription" class="col-sm-2 control-label">景点描述</label> 32 <div class="col-sm-5"> 33 <textarea rows="3" class="form-control" id="siteDescription" name="description"></textarea> 34 </div> 35 </div> 36 <input type="hidden" class="form-control" name="country" value="CN"> 37 </form>
JS
$("#siteSubmit").click(function () {
let siteTitle = $.trim($("#siteTitle").val());
if(siteTitle === ""){
bootbox.alert("景点标题不能为空");
return;
}
let siteProvince = $.trim($("#siteProvince").val());
if(siteProvince === "-1"){
bootbox.alert("请选择景点所属省份");
return;
}
let siteCity = $.trim($("#siteCity").val());
if(siteCity === "-1"){
bootbox.alert("请选择景点所属城市");
return;
}
let url = basePath+"/site/add.action";
let data = new FormData(document.getElementById("siteForm"));
data.append("file",$('#picturePath').get(0).files[0]);
if(data.get("file").name===""){ // 校验file文件是否存在
bootbox.alert("请选择景点图片");
return;
}
$.ajax({
url : url,
type : "post",
data : data,
dataType : "json",
contentType : false,
processData : false,
success : function(result) {
if(result.success===200){
bootbox.alert("上传成功");
$("#siteForm")[0].reset();
}
closeLoading();
},
error : function () {
closeLoading();
}
});
});
Java(springmvc)
@RestController @RequestMapping("/site") public class SiteController { @Autowired private SiteMapper siteMapper; @RequestMapping(value="/add", method = RequestMethod.POST) public JSONObject add(HttpSession session, @RequestParam(value = "file") MultipartFile file, Site site){ // 你的业务逻辑 } }