收藏
批改状态：未批改
老师批语：
使用Ajax无刷新上传图片示例，首选通过JQuery对象获取上传的文件名，要想将JQuery转换成对象必须得先转成DOM对象
然后使用，下面这句加上index索引[0]就可以转化为DOM对象
var files=$("#file")[0].files[0]
后端PHP部分：
使用全局数组 _FILES 得到上传的信息，并且使用数组过滤器过滤上传的类型，再将其以最新时间的命名方式进行改名，最后
将上传到临时目录下的文件移动到目标上传目录，然后以JSON返回结果，具体相关代码如下：
上传结果：
HTML部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
<style>
.main{
border:1px solid #CCC;
margin: auto;
width: 600px;
height: 300px;
border-radius: 20px;
}
.main p{
margin-left: 10px;
}
</style>
</head>
<body>
<div class="main">
<p>
<lable>请选择要上传的文件：</lable>
<input type="file" id="file">
</p>
<p>
<button>开始上传</button>
</p>
</div>
</body>
</html>JS部分：
$(document).ready(function () {
//添加控制事件
$('button:first').click(function () {
if($('#file').val().length==0){
$('#file').parent($('span').remove())
$('button:first').after('<span style="color: #ff0000;">请先选择上传的文件！</span>')
}else{
//获取文件路径
var files=$("#file")[0].files[0]
// var file=files.files[0]
console.log(files)
//创建 formData 对象 FormData为序列化表单
var formdata = new FormData()
formdata.append('files',files)
//采用 ajax 进行发送
$.ajax({
url:'upload.php',
type:'POST',
data:formdata,
dataType:'JSON',
processData:false,//用于对data参数进行序列化处理，这里必须false；如果是true，就会将FormData转换为String类型
contentType:false,//一些文件上传http协议的关系，自行百度，如果上传的有文件，那么只能设置为false
success:function (status) {
// console.log(status.msg)
$('#file').parent($('span').remove())
$('#file').after('<br><span style="color:#008800;font-size: 14px;">'+status.msg+'</span>')
}
})
}
})
})PHP部分：
<?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)){
//将上传的文件重命名
$date=date('Ymdhis');//得到当前时间,如;20070705163148
$fileName=$_FILES['files']['name'];//得到上传文件的名字
$name=explode('.',$fileName);//将文件名以'.'分割得到后缀名,得到一个数组
$newPath=$date.'.'.$name[1];//得到一个新的文件为'20070705163148.jpg',即新的路径
$oldPath=$_FILES['files']['tmp_name'];//临时文件夹,即以前的路径
//将用户文件保存到指定目录
if(move_uploaded_file($oldPath,"upload/{$newPath}")){
echo json_encode(['msg'=>'上传成功！新的文件名是：'.$newPath]);
} else {
echo json_encode(['msg'=>'上传失败']);
}
}else{
echo json_encode(['msg'=>'只可以上传jpg,jpeg,png的图片']);
}
}else{
echo json_encode(['msg'=>'请先上传文件']);
}
//上传失败的常见错误捕获
if($_FILES['files']['error']>0){
switch ($_FILES['files']['error']) {
case 1:
echo json_encode(['msg'=>'文件超过php.ini中的默认大小']);
break;
case 2:
echo json_encode(['msg'=>'文件超过表单设置大小']);
break;
case 3:
echo json_encode(['msg'=>'文件只有一部分上传']);
break;
case 4:
echo json_encode(['msg'=>'没有文件上传']);
break;
case 6:
echo json_encode(['msg'=>'没有临时文件夹']);
break;
case 8:
echo json_encode(['msg'=>'上传意外终止']);
break;
default:
echo json_encode(['msg'=>'未知错误']);
break;
}
}
//清空临时文件下的文件，系统也会在回话结束时清空
if(file_exists($_FILES['files']['tmp_name'])&&is_file($_FILES['files']['tmp_name'])){
unlink($_FILES['files']['tmp_name']);
}
}
?>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
