![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
总结：
FormData()，大小写不要写错；难点，没学，网上也不好找详细用法，为什么file数据为数组形式？
ajax提交方式要注意两个false量，不然出错；
处理脚本里面$_FILES['...']['...']，第一个方括号里面的内容是变量，一定要和前端传输数据对应，不要照抄，不然出错！！
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0419,实战PHP文件上传</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<fieldset>
<legend>PHP文件上传</legend>
<p>
<label for="myfile"></label>
<input type="file" name="file" id="file">
</p>
<p>
<button type="submit" name="submit" id="submit">提交</button>
</p>
</fieldset>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//给按钮添加click事件
$('#submit').on('click',function(){
//选择input元素？？？？一个input为什么是数组？？？？
var file= $('#file')[0];
var files=file.files[0];
// console.log(files)
//创建FormData对象-----一个单词都不要写错，不然返回未定义
var formdata= new FormData();
// 给formdata后面添加获取到的信息
formdata.append('files',files);
//使用$.ajax方式提交
$.ajax({
url:'check.php',
type:'POST',
data:formdata,
processData : false,//重要，禁止序列化
contentType : false,//重要，忽略数据类型
success:function(res){
$('span').empty()
$('#submit').after('<span>').next().text(res);
}
})
return false;//禁止跳转
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
check.php
<?php
header("Content-Type: text/html; charset=UTF-8");
if($_SERVER['REQUEST_METHOD']=='POST'){//检查提交方式，必须为post
if(isset($_FILES['files'])){//检查是否存在
$type=['image/jpg','image/jpeg','image/png'];
if(in_array($_FILES['files']['type'], $type)){//检查文件类型
if(move_uploaded_file($_FILES['files']['tmp_name'],'upload/'.$_FILES['files']['name'])){
echo "上传成功";
}
}else{
echo "上传文件类型错误";
exit();
}
}else{
echo "请上传文件！";
exit();
}
if($_FILES['files']['error']>0){//返回错误
echo "上传错误！";
exit();
}
//清空缓存
if(file_exists($_FILES['files']['tmp_name'])&&is_file($_FILES['files']['tmp_name'])){
unlink($_FILES['files']['tmp_name']);
}
}点击 "运行实例" 按钮查看在线实例
运行效果：
