（FORMDATAを使用して）ファイルをアップロードするためのフォームを含むフォーム

（bootstrap3スタイルを使用して）HTML

1                              < フォームクラス= "フォーム水平" 役割= "フォーム" ID = "siteForm" > 
2                                  < DIV クラス= "フォームグループ" > 
3                                      < ラベルのため= "siteTitle" クラス= "COL-SM-2コントロール-ラベル" >景点名称</ ラベル> 
4                                      < DIV クラス= "COL-SM-5" > 
5                                          < 入力タイプ= "テキスト" クラス= "フォームコントロール" ID ="siteTitle」 名前= "siteTitle" >
6                                      </ DIV > 
7                                  </ DIV > 
8                                  < DIV クラス= "フォームグループ" > 
9                                      < ラベルのため= "siteProvince" クラス= "COL-SM-2コントロールラベル" >景点所在省份</ ラベル> 
10                                      < DIV クラス= "COL-SM-5" > 
11                                          < セレクトクラス= "フォームコントロール" ID = "siteProvince" 名前= "州" のonchange =」doProvAndCityRelation（この）」 > 
12                                              <オプション値= ' - 1' >地域を選択</ オプション> 
13である                                         </ SELECT > 
14                                      </ DIV > 
15                                  </ DIV > 
16                                  < DIV クラス= "フォームグループ" > 
17                                      < ラベルのため= "siteCity" クラス= "COL-SM-2コントロールラベル" >観光スポット</ ラベル> 
18                                      < divのクラス= "COL-SM-5" > 
19                                          <選択クラス=「フォームコントロール」ID = "siteCity" 名前= "街" > 
20                                              < オプション値= ' - 1' >选择城市请</ オプション> 
21                                          </ 選択> 
22                                      </ DIV > 
23                                  </ DIV > 
24                                  < DIV クラス= "形-基」> 
25                                      < ラベル用picturePath "=" クラス= "COL-SM-2コントロールラベル" >景点图片</ ラベル> 
26                                      <div クラス= "COL-SM-5"> 
27                                          < 入力タイプ= "ファイル" クラス= "フォームコントロール" ID = "picturePath" 名前= "ファイル" > 
28                                      </ DIV > 
29                                  </ DIV > 
30                                  < DIV クラス= "フォームグループ" > 
31                                      < ラベルのため= "siteDescription" クラス= "COL-SM-2コントロールラベル" >景点描述</ ラベル> 
32                                      < DIV クラス= "COL-SM-5"> 
33                                          < TEXTAREA行= "3" クラス= "フォームコントロール" ID = "siteDescription" 名前= "説明" > </ TEXTAREA > 
34                                      </ DIV > 
35                                  </ DIV > 
36                                  < 入力タイプ= "隠れた" クラス= "フォーム-制御」名前= "国" 値= "CN" > 
37                              </ フォーム>

JS

$（ "＃siteSubmit"）をクリックします（。関数（）{ 
   letのはsiteTitle = .trim $（$（ "＃siteTitle" ）.val（））;
    IF（siteTitle === "" ）{ 
       bootbox.alert（「風景タイトルは空にすることはできません" ）;
        を返す; 
   } 
   letのsiteProvince = .trim $（$（" ＃siteProvince " ;）.val（））
     IF " -1（siteProvince === " ）{ 
        （bootbox.alert "風景を選択してください州が属する" ）;
         を返す; 
    } 
    ましょうsiteCity = .trim $（$（" ＃のsiteCity " ）.val（））;
     IF（siteCity ===" -1」）{ 
        bootbox.alert（"あなたの街の観光スポットを選択してください" ;）
         を返す; 
    } 
   のlet URL = basePathを+ "/サイト/ add.actionを" ; 
   データましょう = 新しい新しいいるFormData（のdocument.getElementById（ "siteForm" ））; 
   data.append（ "ファイル"、$ （ '#picturePath'）0（0）.filesをGET ]）;
    のiF。（data.get（ "ファイル"）名=== "" ）{//ファイルのファイルをチェック存在
       （bootbox.alertを "観光名所の写真を選択してください" ）;
        を返す; 
   } 
    $アヤックス（{ 
        URL：URL、
        タイプの： " POST " 、
        データ：データ、
        データ型を："JSON" 、
        contentType：偽、
        PROCESSDATA：偽、
        成功：関数（結果）{
             場合（result.success === 200 ）{ 
                bootbox.alert（ "上传成功" ）。
                $（ "#siteForm"）[0 ] .RESET（）; 
            } 
            closeLoading（）。
        }、
        エラー：関数（）{ 
            closeLoading（）。
        } 
    }）。
}）;

ジャワ（springmvc）

@RestController 
@RequestMapping（ "/サイト" ）
 のパブリック クラスSiteController { 

    @Autowired 
    プライベートSiteMapper siteMapper。

    @RequestMapping（値 = "追加/"は、この方法は、= RequestMethod.POST）
     公衆JSONObjectは（HttpSessionのセッション、追加
                          @RequestParam（値 = "ファイル" ）MultipartFileファイル、
                          サイトのサイト）{ 
　　　　　　//你的业务逻辑
    } 
}