![[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
formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可。
php部分使用$_FILES全局数组对上传的文件进行处理，上传成功后返回相应的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用ajax实现文件上传</title>
<style type="text/css">
.box{
width: 360px;
margin: 0 auto;
}
button{
border-style: hidden;
background-color: lightblue;
color: white;
padding:5px 10px 5px 10px;
margin-top: 50px;
}
input{
}
</style>
</head>
<body>
<div class="box">
<p>
<label>选择上传文件:</label>
<input type="file" name="file">
</p>
<p>
<button>上传</button>
</p>
</div>
</body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$('button:first').click(function(){
if($("input[name='file']").val().length==0){
$("input[name='file']").parent($('span').remove())
$('button:first').after('<span style="color:lightgreen;">未选择任何文件!</span>')
}else{
//获取文件路径
var files = $("input[name='file']")[0].files[0]
//实例化Formdata对象
var formdata = new FormData()
formdata.append('files',files)
//使用$.ajax进行数据传送
$.ajax({
url:'file.php',
type:'POST',
data:formdata,
// dataType:'JSON',
processData:false,
contentType:false,
success:function(status){
$("input[name='file']").parent($('span').remove())
$("input[name='file']").after('<br><span style="color:lightgreen;font-size: 14px;">'+status+'</span>')
}
})
}
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
<?php
if($_SERVER['REQUEST_METHOD']=="POST"){
//判断请求是否为空
if(isset($_FILES['files'])){
$img_type=['image/jpg','image/jpeg','image/png'];
//判断上传的图片是否规定的类型
if(in_array($_FILES['files']['type'],$img_type)){
//将文件移动要临时目录
if(move_uploaded_file($_FILES['files']['tmp_name'],"upload/{$_FILES['files']['name']}")){
//上传成功
echo '文件上传成功';
}
else{
//上传失败
echo '上传失败';
}
}
else{
//提示格式不对
echo '上传的图片格式不正确';
}
}
//对上传错误进行处理
if ($_FILES['files']['error'] > 0 ) {
echo '<p>错误原因是:<strong>';
switch ($_FILES['files']['error']) {
case 1:
echo '文件超过了php.ini配置中设置的大小';
break;
case 2:
echo '文件超过了表单中常量设置的大小';
break;
case 3:
echo '仅有部分文件被上传';
break;
case 4:
echo '没有文件被上传';
break;
case 6:
echo '没有可用的临时文件夹';
break;
case 7:
echo '磁盘已满,写入失败';
break;
case 8:
echo '上传意外中止';
break;
default:
echo '系统未知错误';
break;
}
echo '</strong></p>';
//保险起见,最好把创建的临时文件删除,当然系统也会在结束会话时自动清空
if (file_exists($_FILES['files']['tmp_name']) && is_file($_FILES['files']['tmp_name'])) {
unlink($_FILES['files']['tmp_name']);
}
}
} else {
echo '1';
}
?>点击 "运行实例" 按钮查看在线实例
