FormData对象

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);