• 上传含有文件的form表单(使用formdata)


    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){
          // 你的业务逻辑
        }
    }
  • 相关阅读:
    Vue 过滤器入门
    Vue 常用指令
    git 报错 error: failed to push some refs to .....
    CSS 小结笔记之文字溢出处理
    CSS 小结笔记之元素的隐藏与显示
    CSS 小结笔记之定位
    CSS 小结笔记之清除浮动
    CSS 小结笔记之浮动
    CSS 小结笔记之盒子模型
    CSS 实例之文字的凸起与凹陷
  • 原文地址:https://www.cnblogs.com/knightdreams6/p/10939404.html
Copyright © 2020-2023  润新知