form containing the form to upload the file (using formdata)

HTML (using bootstrap3 style)

 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' > select a province </ Option > 
13 is                                          </ SELECT > 
14                                      </ div > 
15                                  </ div > 
16                                  < div class = "form-Group" > 
. 17                                      < label for = "siteCity" class = "COL-SM-2 Control-label" > city attractions </ 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") the Click (. function () { 
   the let siteTitle = .trim $ ($ ( "# siteTitle" ) .val ());
    IF (siteTitle === "" ) { 
       bootbox.alert ( "landscape The title can not be empty " );
        return ; 
   } 
   the let siteProvince = .trim $ ($ (" # siteProvince " ;) .val ())
     IF " -1 (siteProvince === " ) { 
        (bootbox.alert " Please select landscape province belongs to " );
         return ; 
    } 
    the let siteCity = .trim $ ($ (" # siteCity " ) .val ());
     IF (siteCity ===" -1 "){
        bootbox.alert("Please select your city attractions" );
         return ; 
    } 
   the let url = basePath + "/ Site / add.action" ; 
   the let the Data = new new FormData (document.getElementById ( "siteForm" )); 
   data.append ( "File", $ ( '#picturePath') GET (0) .files [0. ]);
    iF . (data.get ( "file") name === "" ) {// check file file exists 
       bootbox.alert ( " choose attraction images " );
        return ; 
   } 
    $ .ajax ({ 
        url: url, 
        of the type: " POST " , 
        the Data: the 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){
　　　　　　// 你的业务逻辑
    }
}