FormData对象提交表单及上传图片/文件

最新推荐文章于 2025-05-13 09:55:05 发布

S筱潇S四维Smile

最新推荐文章于 2025-05-13 09:55:05 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_29483485/article/details/83112659

JavaScript 同时被 2 个专栏收录

61 篇文章

订阅专栏

Javascript

38 篇文章

订阅专栏

本文介绍如何使用FormData对象处理表单数据，并通过AJAX将数据提交到服务器。首先，展示了创建FormData对象并手动添加数据的方法；其次，演示了直接从form元素创建FormData对象的过程；最后，提供了使用jQuery AJAX进行POST请求的示例，包括设置必要的参数以确保正确发送FormData。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建一个FormData空对象，然后使用append方法添加key/value

var formdata = new FormData();
formdata.append('name','fdipzone');
formdata.append('gender','male');

2.取得form对象，作为参数传入到FormData对象

<form name="form1" id="form1">
<input type="text" name="name" value="fdipzone">
<input type="text" name="gender" value="male">
</form>
var form = document.getElementById('form1');
var formdata = new FormData(form);

3.ajax提交服务器

var data = new FormData($('#form1')[0]);
$.ajax({
    url: 'server.php',
    type: 'POST',
    data: data,
    dataType: 'JSON',
    cache: false,
    processData: false,//必选，告诉jQuery不要去处理发送的数据
    contentType: false,//必选，告诉jQuery不要去设置Content-Type请求头
    success : function(data){
        console.log(data)

    }
})