收藏
批改状态：合格
老师批语：
$.ajax--异步表单文件上传：
1.除了传统的表单提交方式，然而传统方式已经不再满足客户需求 ，需要更好的体验，那么采用jQuery中的 $.ajax()来实现表单文件的上传。当然对于初学者 有太多的坑，话不多说 有图有真相，
1.1先附上 前端文件源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/layer/2.1/layer.js" type="text/javascript" charset="utf-8"></script>
<title>实战:文件上传</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
background: url(../../images/2.jpg)no-repeat;
overflow: hidden;background-size:500% ;background-position-y:-200px;
}
.container{
height: 600px;
width: 500px;
background-color: rgba(0,0,0,0.5);
margin: 100px auto;
border-radius: 10px;
margin-top: 250px;
}
img{
display: block;
width: 360px;
height: 400px;
background-color: aquamarine;
margin: 30px auto;
box-shadow: 5px 5px 1px #8E8C8C;
border-radius:10px ;
}
h2{
text-align: center;
color: white;padding-top:20px ;
}
.btn{
width: 150px;height: 30px;
background: coral;border: none;
border-radius: 3px;color: white;
margin-left: 66px;
cursor: pointer;
}
.btn:hover{
font-size: 1.02em;
background: orange;
}
</style>
</head>
<body>
<!--
作者：1083396620@qq.com
时间：2018-04-19
描述：
实战之前我们先来学习下一个系统函数 $_FILES 该函数是一个二维数组
一维就是要上传的表单name的属性 二维重要的有以下几个数组元素
$_FILES['input中name属性']['name']
1.$_FILES['file']['name'] 上传文件的名称
2.$_FILES['file']['type'] 上传文件的类型
3.$_FILES['file']['size'] 上传文件的大小
4.$_FILES['file']['tmp_name'] 上传文件的临时文件夹
5.$_FILES['file']['error'] 错误信息
-->
<div class="container">
<h2>头像预览</h2>
<div class="pic">
<img src="../../php中文网练习/jQuery/images/7.png" />
</div>
<form id="info" enctype="multipart/form-data" onsubmit="return false">
<p><input type="file" name="file" id="file" value="" /></p>
<p><input type="hidden" name="MAX_FILE_SIZE" id="hide" value="512042488" /></p>
<p><input type="submit" name="button" id="button"class="btn" value="上传图片" />
<input type="reset" name="reset" id="reset" class="btn" value="重新填写" /></p>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$('#button').click(function(){
// 1.使用html5中的方法 FormData对象方法提交表单数据
//创建空对象
var formdata = new FormData($('#info')[0])
//传入参数
// formdata.append('file',$('#file').val())
// formdata.append('MAX_FILE_SIZE',$('#hide').val())
$.ajax({
url:'requied.php',
type: 'POST',
data:formdata,
dataType:'json',
contentType: false,//禁止设置请求类型
processData:false,// 禁止jq对数据的处理 因为在FormData对象中已经处理了
success:function(res){
switch (res.status){
case '200':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
break;
case '1':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
var index = layer.load(0, {shade: false});
break;
case '2':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
break;
case '3':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
break;
case '4':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
var index = layer.load(0, {shade: false});
break;
case '6':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
break;
case '7':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
break;
case '8':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
break;
case '5':
layer.tips(res.msg, '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
break;
default:
layer.tips('未知错误', '.pic img', {
tips: [1, '#3595CC'],
time: 8000
});
break;
}
$('.pic img').attr('src', '/php/0419/upload/'+res.src);
}
})
})
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
1.2 对于html有一个槽点 就是一定要采用submit提交 一定要禁用 默认事件 enctype 一定要是multipart/form-data
<form id="info" enctype="multipart/form-data" onsubmit="return false"> 在php中获取不到$_FILES 超级变量就是这个没有设置好
1.3js中 采用h5中新增的方法 FormData 方法 详细使用方法请百度
2.php代码 不太完善还可以增加上传文件大小判断等 看代码
<?php
//请求传递方式是否为post
if($_SERVER['REQUEST_METHOD']=='POST') {
//检测文件是否被上传
if(isset($_FILES['file'])){
//设置文件上传的类型
$images = ['image/png','image/jpg','image/jpeg'];
//p判断是否在数组中
if(in_array($_FILES['file']['type'], $images)){
//将文件移动到临时目录并移动到上传目录
if(move_uploaded_file($_FILES['file']['tmp_name'],"upload/{$_FILES['file']['name']}")){
echo json_encode(['status'=>'200','msg'=>'恭喜你！！！文件上传成功','src'=>"{$_FILES['file']['name']}"]);
}
}else{
exit (json_encode(['status'=>'5','msg'=>'文件类型不正确，请重新上传']));
}
}
if($_FILES['file']['error'] > 0){
switch ($_FILES['file']['error']) {
case '1':
echo json_encode(['status'=>'1','msg'=>'很遗憾！！！文件超过了php.ini配置中设置的大小']);
break;
case '2':
echo json_encode(['status'=>'2','msg'=>'很遗憾！！！文件超过了表单中常量设置的大小']);
break;
case '3':
echo json_encode(['status'=>'3','msg'=>'很遗憾！！！仅有部分文件被上传']);
break;
case '4':
echo json_encode(['status'=>'4','msg'=>'很遗憾！！！没有文件被上传']);
break;
case '6':
echo json_encode(['status'=>'6','msg'=>'很遗憾！！！没有可用的临时文件夹']);
break;
case '7':
echo json_encode(['status'=>'7','msg'=>'很遗憾！！！磁盘已满,写入失败']);
break;
case '8':
echo json_encode(['status'=>'8','msg'=>'很遗憾！！！上传意外中止']);
break;
default:
echo json_encode(['status'=>'9','msg'=>'很遗憾！！！文件上传失败 ，返回未知错误']);
break;
};
};
}else{
echo '<pre>';
exit(json_encode(['status'=>'404',"当前的请求方式是：{$_SERVER['REQUEST_METHOD']}"]));
};
?>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
