1.定义表单内容，代码如下
<Form id="userForm" enctype="multipart/form-data"> //通过该id="userForm" ，可定位到该表单
<FormItem ><Input name="userName"/></FormItem> //用户名 必须定义name，后台要通过name解析该表单的具体内容
<FormItem ><Input name="userAge"/></FormItem> //用户年龄
<FormItem ><Input type="file" name="information"/></FormItem> //上传个人信息文件
<FormItem ><Button style={buttoncolor} onClick={this.Add.bind(this)}>提交</Button> </FormItem>
</Form>
2.提交按钮执行事件：通过FromData+Ajax 提交（post）数据
Add = () => {
var formData = new FormData($("#userForm")[0]); // 定位到userForm表单，并将表单定位转为FormData对象
$.ajax({
url: '/add', //网络请求url地址
type: 'POST',
data: formData, //表单数据
cache: false,
contentType: false, //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件
processData: false,
success: function (data) {
console.log('成功');
}.bind(this),
error: function (xhr, status, err) {
}.bind(this)
});
}
data：发送到服务器上的数据
cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。 上传文件不需要缓存所以此处为false
contentType: 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"（不能用于文件上传），提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。该默认值适合大多数应用场合。multipart/form-data：可以上传文件；application/json：告诉服务端消息主体是序列化后的 JSON 字符串
processData: 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"（不能用于文件上传）。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。而现在我们发送的是formData对象数据，不需要再做处理，所以设置为false
3.formData对象
通过FormData对象可以组装一组用xmlhttprequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit方法传输的数据格式相同
创建一个FormData对象，然后通过调用它的append方法添加字段：
var formData = new FormData();
formData.append("username", "小明");
formData.append("userage", 12);
---------------------
作者：只如初见0706
来源：CSDN
原文：https://blog.csdn.net/zrcj0706/article/details/78639548
版权声明：本文为博主原创文章，转载请附上博文链接！