![[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 id="picupload" enctype="multipart/form-data">
<fieldset>
<legend>上传测试</legend>
<label for='file'></label><input type="file" name="file" id='file'>
<p><button type='submit' name='submit' id='submit'>上传</button></p>
</fieldset>
</form>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
$('#submit').click(function(){
var pic = new FormData();
pic.append("file", $("#file").get(0).files[0]);
$.ajax({
url:'upload.php',
type:"post",
processData: false,
contentType: false,
data:pic,
dataType:'json',
success:function(res){
$('span').remove()
// $('p').after('<span>').next().html(res).css('color','green')
switch(res.status){
case 0:
$('p').after('<span>').next().html(res.msg).css('color','green')
break
case 1:
$('p').after('<span>').next().html(res.msg).css('color','red')
break
case 2:
$('p').after('<span>').next().html(res.msg).css('color','red')
break
case 3:
$('p').after('<span>').next().html(res.msg).css('color','red')
break
}
}
})
return false
})
</script>点击 "运行实例" 按钮查看在线实例
<?php
$randname =date('Hms');
$randname .= rand(0,999)*rand(0,999).'.jpg';
$allow = ['image/jpg','image/jpeg','image/png'];
$name = $_FILES['file']['name'];
$type = $_FILES['file']['type'];
$size = $_FILES['file']['size'];
$tmp_name = $_FILES['file']['tmp_name'];
$error = $_FILES['file']['error'];
if ($_SERVER['REQUEST_METHOD']=='POST') {
if (isset($_FILES['file'])) {
if(in_array($type,$allow)){
if ($size < (1024*50)) {
move_uploaded_file($tmp_name,'upload/'.$randname);
exit(json_encode(['status'=>0,'msg'=>'图片上传成功']));
}else{
exit(json_encode(['status'=>1,'msg'=>'文件尺寸不得大于50KB！']));
}
}else{
exit(json_encode(['status'=>2,'msg'=>'不支持此类型文件上传！']));
}
}else{
exit(json_encode(['status'=>3,'msg'=>'文件没有选择！']));
}
}点击 "运行实例" 按钮查看在线实例
