formData对象
1.使用formData传递参数需要注意的点 :
1.使用FormData传递数据 必须是post请求
2.创建FormData对象 创建时可以传参 参数是form表单元素 必须是DOM元素
3.传递的form对象能获取到的 只能找到带有name属性的表单元素
4.如果想要额外传递其他参数 FormData对象调用append方法添加进去
2.如果通过jQuery发送ajax请求 , 并且使用FormData对象传递数据
1.processData : false 告诉jQuery 将数据原样传递 不用转换成key=value形式
2.contentType : false 告诉jQuery不用再加请求头了 因为FormData已经自动加上
3.发送图片及预览
file 类型的input标签 传入文件之后 文件内容在 file.files[0]
取到文件想要显示 : 少不了img 需要将文件转化成url
转换成url有两种方式 :
1.临时路径
直接在前端使用 URL.createObjectURL进行转换
缺点 : 一旦网页关闭 临时路径就会被清空 获取不到文件了
2.永久保存
//打开服务器
html:
<form action="">
<input type="text" name="name" placeholder="请输入用户名">
<input type="text" name="age" placeholder="请输入性别">
<input type="text" name="place" placeholder="请输入工作地">
<input type="text" name="job" placeholder="请输入工作">
<input type="text" name="salary" placeholder="请输入薪资">
<input type="file" name="icon" >
<div name="box">你好</div>
<!-- <input type="submit" value="登录"> -->
</form>
<input type="button" value="点我发请求" id="btn">
<input type="button" value="点我用jQuery发请求" id="btn1">
js:
var form = document.getElementsByTagName("form")[0];
document.getElementById("btn").onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("post", "data.php");
// 使用formData对象 发送数据 只能使用post请求
// formData 可以自动帮我们添加请求头
// var fm = new FormData();
// fm.append("name", "jack");
// fm.append("type", "帅哥");
// var fm = new FormData(form);
// var fm = new FormData($("form"));
var fm = new FormData($("form")[0]);
fm.append("box", "你好");
xhr.send(fm);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
}
jq:
$("#btn1").click(function() {
var fm = new FormData($("form")[0]);
$.post({
data : fm ,
// 相当于告诉jQuery 不用对我传递的对象进行转换 不用转成key=value的字符串
processData : false,
// 是formData自动给请求加了请求头 就是告诉jQuery 不用加请求头了
contentType : false,
url : "./data.php",
success : function(obj) {
console.log(obj);
}
})
})
php:
<?php
var_dump ($_GET);
var_dump ($_POST);
var_dump ($_FILES);