ajax使用FormData提交带文件表单

  • 前端H5页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax使用FormData提交带文件表单</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<h1>ajax使用FormData提交带文件表单</h1>
<script type="text/javascript">

    $(function(){
        $("#formdataId").click(function(){
            var form=document.querySelector("#form1");
            var form3 = document.getElementById("form1");
            var formData = new FormData(form3);
            alert(formData.get("name")+"=="+formData.get("passwd")+"=="+formData.get("file"));
            $.ajax({
                url : '/ajax_upload_1',
                type : 'post',
                data : formData,
                processData : false, //告诉jQuery不要去处理发送的数据
                contentType: false,//告诉jQuery不要去设置Content-Type请求头
                success : function(responseStr) {
                    alert("response：" + responseStr);
                },
                error : function(responseStr) {
                    alert("失败:" + JSON.stringify(responseStr));//将    json对象    转成    json字符串。
                }
            });

        })
    });
</script>
<form action="" id="form1" enctype="multipart/form-data">
    <input type="text" name="name" value="allen"/>
    <input type="text" name="passwd" value="123456"/>
    <input type="file" name="file" id="upload"/>
    <input type="button" value="ajax提交表单" id="formdataId"/>
</form>
<em id="zs_currvip"></em>

</body>
</html>

note：

1.var form=document.querySelector("#form1");

或var form3 = document.getElementById("form1"); 拿到表单里的数据值，通过new FormData(form3)封装到formData对象中

2.切记使用FormData时，ajax里的Type一定要是POST，GET不支持，如果使用GET，后台获取不到参数

3.除了使用new FormData($("#form1"));可以添加值，还可以使用

var formData = new FormData();

formData.append("name","allen");

formData.append("passwd",123456);

自定义参数

4.一定要设置下面的参数，否则Jquery会自动处理

processData : false, //告诉jQuery不要去处理发送的数据

contentType 默认值为 application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。

contentType = false，是防止jQuery对其进行处理,formData 会自动把类型填充为multipart/form-data

  • Java后台Controller

@PostMapping("/ajax_upload_1")
@ResponseBody
public String ajaxUpload1(String name, String passwd, MultipartFile file){
        return "name={" + name + "}, passwd={"+passwd+"}," + file.getOriginalFilename();
}
Previousajax使用FormData提交普通表单Nextajax使用FormData提交带文件表单（JSON保存数据格式）

Last updated

Was this helpful?