概述
FormDate对象可以将form表单中的数据包裹起来，通过ajax异步上传，包括表单中含有文件。
直接上代码
<body>
<p>文件上传操作</p>
<form id="form1" enctype="multipart/form-data">
<input type="file" name="file" id="idName" multiple="multiple" accept="image/*">
<input type="text" name="abcd">
<input id="but1" type="button" value="点击上传">
</form>
<script>
$('#but1').click(function () {
var from = new FormData(document.getElementById("form1"));
$.ajax({
url:"/api.php",
type:"post",
data:from,
processData:false,
contentType:false,
success(data){
console.log(data)
},
error(e){
console.log(e)
}
})
});
</script>
</body>FormDate对象会将form中的数据包装成json对象（键值对形式{name1:value1,name2:value2}），例如上述代码中的from中储存的对象为
{
file:"上传文件",
abcd:"用户输入的文字"
}
//键值对中键为表单中的name元素，值为对应的value当然FormDate也可以直接写入值，不仅仅只能处理表单元素，代码：
from.append("", "value");
//from为FormDate对象，最先的一段代码已经声明了了该对象，username为键，value为对应的值通过ajax上传给服务器后，PHP通过$_FILES来获取
<?php
// 处理上传文件
//判断是否有上传文件
if(!isset($_FILES)){
exit('没选中文件');
}
//获取文件的名称
$name = $_FILES["file"]["name"]
//获取文件临时地址
$jiudizhi = $_FILES["file"]["tmp_name"];
// 测试输出
echo $name,$jiudizhi;
// 注意，PHP通过$__FILES['name']来获取上传的对象，上述代码包含了三个$_FILES对象，$__FILES['file'],$__FILES['abcd'],以及$__FILES['username']仅测试了PHP
另外最好在form表单中添加属性enctype="multipart/form-data"，这个属性规定了表单提交数据的格式，如果是上传文件的话必须有该属性
大家有什么问题欢迎留言
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
