SpringBoot+Ajax文件上传+FormData表单提交

需求

前端: 
html定义好form表单的输入信息(text+file)标签 
js通过Ajax异步提交表单中的内容。 
后端: 
通过接口接收表单中的数据(String+MultipartFile)

实现

HTML部分 :html定义好form表单的输入信息(text+file)标签

//定义好id,ajax会用到
 
//单选项 (解释:name要与接口的参数名对应起来,value是对应值) 一号位 二号位 二号位 //文字 (解释:name要与接口的参数名对应起来) //文件 (解释:name要与接口的参数名对应起来) //提交 (解释:这个按钮的唯一作用就是触发提交的js方法)

JS部分:首先你得先引入JQuery。

function submitFunction() {
    //这里唯一需要注意的就是这个form-add的id
    var formData = new FormData($("#form-add")[0]);
    $.ajax({
        //接口地址
        url: '/submit' ,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            //成功的回调
            if(data.code == 300){

            }

        },
        error: function (returndata) {
           //请求异常的回调
           // modals.warn("网络访问失败,请稍后重试!");
        }
    });
}

后端Controller部分

@RequestMapping(value = "/submit", method = RequestMethod.POST)
    public BaseBody submit(String imageNameIndex, String url, MultipartFile file)
            throws Exception {

        //这里就可以获取里面的上传过来的数据了

        //做一些存库操作,以及返回的数据

 }

 

你可能感兴趣的:(spring_boot)