![[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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: #ccc;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="542488">
<fieldset>
<legend align="center">文件上传</legend>
<p><label for="upload"><strong>选择文件:</strong></label><input type="file" name="upload" id="upload">
<span><button type="submit" name="submit" id="submit">上传</button></span></p>
</fieldset>
</form>
<!-- 改变上传默认样式 -->
<!-- <form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="542488">
<fieldset>
<legend align="center">文件上传</legend>
<div class="file-box">
<input type="file" name="upload" class="file-btn" id="upload">上传文件
</div>
<span><button type="submit" name="submit">上传</button></span></p>
</fieldset>
</form> -->
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$('#submit').click(function(){
$.post('$_SERVER['PHP_SELF']','upload='+$('#upload').val(),function(data){
switch(data.status){
case 0;
$('button').find('span').remove()
$('#submit').after('<span>').next().text(data.msg).css('color','green')
// $('#upload').befor('<img src=""')
break;
case 1;
$('button').find('span').remove()
$('#submit').after('<span>').next().text(data.msg).css('color','red')
break;
case 1;
$('button').find('span').remove()
$('#submit').after('<span>').next().text(data.msg).css('color','red')
break;
}
},'json')
})
</script>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_FILES['upload'])){
$file_typ = ['image/jpg','image/jpeg','image/png'];
if (in_array($_FILES['upload'],$file_typ)) {
if (move_uploaded_file($_FILES['upload']['tmp_name'], "upload{$_FILES['upload']['name']}")){
exit json_encode('status'=> 0,'msg'=>'上传成功')
}
}
else {
exit json_encode('status'=> 1,'msg'=>'文件类型错误');
}
}
}else {
exit json_encode('status'=> 2,'msg'=>'请求类型错误')
}
?>
</body>
</html>点击 "运行实例" 按钮查看在线实例