上传含有文件的form表单（使用formdata）

Posted 2021-12-09 knightdreams6

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){
　　　　　　// 你的业务逻辑
    }
}