- 在form表单内
- form要有id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="./libs/jquery/jquery.js"></script>
<body>
<form action="" id="myform">
用户名:
<input type="text" name="username" />
<br />
密码:
<input type="text" name="password" />
<br />
头像:
<input type="file" class="myimg" name="myimg" />
<input type="button" value="文件上传" class="btn" />
</form>
<script>
document.querySelector('.btn').onclick = function () {
// 1.使用serialize方法收集表单数据
// serialize不能收集到文件数据
// console.log($('#myform').serialize());
// 2.使用formdata 收集表单数据,它是原生方法
// let formdata = new FormData(表单元素dom);
//💥💥💥💥: formdata可以收集指定表单中拥有name属性的表单元素的value值
// let formdata = new FormData($('#myform')[0]);
// console.log(formdata.get('username'), formdata.get('password'), formdata.get('myimg'));
// append方法的使用,追加参数到formdata
let formdata = new FormData();
// append:追加参数,格式为键值对的组合
// 键:为字符串类型
// 值:可以是任意类型
// formdata.append('file_data', [1, 2, 3, 4, 5]);
// 获取问价数据对象
// files:它是一个伪数组,里面存储就是当前用户所选择的文件对象
// console.log(document.querySelector('.myimg').files[0]);
// formdata.append('file_data', document.querySelector('.myimg').files[0]);
formdata.append('file_data', $('.myimg')[0].files[0]);
console.log(formdata.get('file_data'));
};
</script>
<script></script>
</body>
</html>