![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
前端部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form action="homework.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="542488">
<fieldset>
<legend align="center">文件上传</legend>
<p><strong>选择文件:</strong><input type="file" name="upload" id="file"></p>
</fieldset>
<p align="center"><button type="submit" name="submit" id="submit">上传</button></p>
<p align="center" id="alert"></p>
</form>
</body>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('#submit').click(function() {
// console.log(1);
// console.log($('#file'));
var formData = new FormData($('form')[0]);
formData.append('file',$(':file')[0].files[0]);
$.ajax({
url: 'homework.php',
type: 'POST',
data: formData,
contentType: false, // 不可缺
processData: false, // 不可缺
success: function(data){
console.log(data);
$('#alert span').empty();
$('#alert').append(data);
}
})
return false;
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
PHP部分：
<?php
// $_FILES: 它是一个二位数组
// $_FILES['当前上传文件的控件名称,input[name="upload"]']
// 一维部分 二维部分
// $_FILES['upload']['name']:文件原始名称
// $_FILES['upload']['type']:文件类型
// $_FILES['upload']['size']:文件大小
// $_FILES['upload']['tmp_name']:服务器上的临时文件夹
// $_FILES['upload']['error']:错误代码
if($_SERVER['REQUEST_METHOD'] == 'POST') {
//1.检测是否有文件被上传
if (isset($_FILES['upload'])){
// 2.设置一下允许上传的文件类型
$allow = ['image/jpg', 'image/jpeg', 'image/png'];
// 判断用户上传的文件类型是否正确
if (in_array($_FILES['upload']['type'], $allow)) {
//将用户文件上传到指定的临时目录：move_uploaded_file()
if (move_uploaded_file($_FILES['upload']['tmp_name'], "upload/{$_FILES['upload']['name']}")) {
//上传成功
echo '<span>上传成功</span>';
// echo '<script>alert(1234)</script>';
}
} else {
echo '<span>仅允许上传jpg或png格式的图片</span>';
}
}
//如果上传失败，返回代码都是大于0的
if ($_FILES['upload']['error'] > 0) {
echo '<p>错误的原因是：<strong>';
switch ($_FILES['upload']['error']) {
case '1':
echo '文件超过了php.ini中的大小';
break;
case '2':
echo '文件超过了表单中设置的大小';
break;
case '3':
echo '文件只有一部分上传了';
break;
case '4':
echo '没有文件被上传';
break;
//没有第五种
case '6':
echo '临时文件夹没有';
break;
//没有第七种
case '8':
echo '上传意外终止';
break;
default:
echo '未知错误';
break;
}
echo '</strong></p>';
//保险起见，最好手工把临时目录下面的文件情况，系统也会在会话结束的时候情况
if (file_exists($upFile['tmp_name']) && is_file($upFile['tmp_name'])){
unclick($upFile['tmp_name']);
}
}
}
?>点击 "运行实例" 按钮查看在线实例
效果图：
