form表单上传数据的几种方式

form 的基本使用

1、什么是表单

表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把用户收集到的信息发送到 Web 服务器进行处理。

在这里插入图片描述

2、表单的组成部分
  1. 表单标签

就是我们常说的form表单，就是所谓的表单标签。

  1. 表单域

也就是表单标签之间的部分，这里面包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等.各种用于采集用户信息的标签。

这里面还可以包含一个特殊的部分，隐藏域：
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：<input type="hidden" name="..." value="...">

  1. 表单按钮

既然采集完用户对应输入的信息了，我还还需要将其提交到服务器，这时就需要借助提交按钮了。按钮的种类很多，如button、submit、reset，各自有各自的特点。

<!-- type=text  键值对,方式提交 -->
<!-- type=file  上传formData这种数据 -->
<form action="">
	<input type="text" name="username" />
	<input type="password" name="password">
	<input type="file" name="file" onchange="fileChange()" />
	<button type="submit">提交</button>
</form>
3、<form>标签的属性

<form>标签用来采集数据

<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。

属性 值 描述
accept MIME_type HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
accept-charset character_set 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocomplete（new） on
off		 规定是否启用表单的自动完成功能。
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况）
method get
post		 规定用于发送表单数据的 HTTP 方法。
name text 规定表单的名称。
novalidate(new) novalidate 如果使用该属性，则提交表单时不进行验证。
target _blank
_self
_parent
_top		 规定在何处打开 action URL。

form表单上传数据（POST）

注意：
1、文件类型（word、excel、image/png、mp4）等文件都需要使用 formData格式上传文件至服务器
2、其他的数据内容基本是那个都是按照对象的形式传递的

1、直接传递对应的参数

实例代码基于jquery实现

$(function() {
	$('button').on('click', function(e) {
	    e.preventDefault();
	    $.ajax({
	        url: 'xxx',
	        type: 'POST',
	        //键值对的方式:
	        data: {
	            username: $('[name="username"]').val(),
	            password: $('[name="password"]').val()
	        },
	        success: (res) => {
	            console.log(res);
	        }
	    })
	})
});
2、formData上传数据(文本、文件、视频、图片等)
fileChange(){
	//选中文件后，会触发input=file的change事件，即会进入此函数
	// 1.先创建formData数据格式 传递HTML对象(文件上传推荐)
	var formData = new FormData()[0]);
	// 2.把传递给服务器数据,追加到formData对象里面
	// 第一种写法：一个个append
	formData.append('username', $('[name="username"]').val())
	formData.append('password', $('[name="password"]').val());
	//添加选择的文件 key值为file
	formData.append('file',$('[name="file"]')[0].files[0]); 
	
	// 第二种写法：遍历写法
	let obj = {
		username: $('[name="username"]').val(),
		password: $('[name="password"]').val(),
		file: $('[name="file"]')[0].files[0]
	}
	$.each(obj,function(key,value) {
	  formData.append(key,value)
	})
	
	//删除数据
	//formData.delete('username');
	//发送请求
	$.ajax({
	    url: 'xxx',
	    type: 'POST',
	    data: formData,
	    //如果提交数据格式为formData类型 必须加下面两句,不添加就报错
	    processData: false, //不希望使用   application/x-www-form-urlencoded
	    contentType: false, //不采用默认的数据类型 
	    //数据格式是 application/x-www-form-urlencoded
	    success: (res) => {
	        console.log(res);
	    },
	    error: function(err) {
	        console.log(err);
	    }
	})
}
3、form表单数据序列化(serialize将传递表单中的数据序列化)
//serialize form表单里面具有name属性的标签进行序列化, 序列化字符串
console.log($('form').serialize());
//输出：
username=admin&password=123123

//serializeArray form表单里面具有name属性的标签进行序列化, 序列化数组套object
console.log($('form').serializeArray());
//输出：
[ 
  {name: 'username', value: 'admin'}, 
  {name: 'password', value: '123123'},
]

console.log(serializeObject($('form'));
//输出：
{username:"admin",password:"123123"}
// 将表单中用户输入的内容转换为对象类型
// 封装一个方法： serializeObject()  ——返回对象
function serializeObject(obj) {
	var params = obj.serializeArray();
	// 使用each方法对params进行操作
	var result = {};
	// 循环数组，将数组转为对象类型
	$.each(params, function(index, value) {
	    result[value.name] = value.value;
	})
	return result;
}

$.ajax({
    url: 'xxx',
    type: 'POST',
    data: JSON.stringify(serializeObject($('form')),
    success: (res) => {
        console.log(res);
    },
    error: function(err) {
        console.log(err);
    }
})