ajax异步上传文件_ajax异步传输文件-CSDN博客

本文链接：https://blog.csdn.net/bj123467/article/details/74722888

1、HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="__PUBLIC__/js/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
<form action="" id="form">
用户名：<input type="text" name="user"/></br>
密码：<input type="password" name="pass" /></br>
性别：<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
头像：<input type="file" id="file" name="file"/></br>
<input type="hidden" value="" name="pic"></input>
<button id="btn" type="button">提交</button>
</form>
<div class="con"></div>
</body>
<script type="text/javascript">
//为文件上传添加change事件
var fileM=document.querySelector("#file");//获取元素对象和document.getElementById差不错
$("#file").on("change",function(){
//获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
var fileObj=fileM.files[0];
//创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
var formData=new FormData();
formData.append('file',fileObj);//给对象里添加字段
var ajax=new XMLHttpRequest();
//发送POST请求,为true时，进行异步请求
ajax.open("POST","__CONTROLLER__/TuPian",true);
ajax.send(formData);//望后台发送formData数据对象
ajax.onreadystatechange=function(){
//相应状态4为请求成功
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var obj=JSON.parse(ajax.responseText);//解析json字符串为对象
if(obj.err == 0){
//上传成功后自动动创建img标签放在指定位置
var img =$("<img src='"+obj.img.substring(1)+"' class='con' />");
$(".con").replaceWith(img);
$("input[name='pic']").attr('value',obj.img);
}else{
alert(obj.msg);
}
}
}
}
});
$("#btn").click(function(){
$.ajax({
url: '__CONTROLLER__/index',
type: 'post',
dataType: 'json',
data: $("form").serialize(),
success:function(){

}
})
})
</script>
</html>

2、PHP页面
public function TuPian(){
//允许跨域请求
header("Access-Control-Allow-Origin:*");
//说明向前台返回的数据类型为JSON
header("Content-type:text/json");
//$_FILES超全局变量存储是文件数据，是一个关联数组
$fileObj=$_FILES['file'];
if($fileObj["error"]==0){
//判断文件是否合法
$types=array("jpg","jpeg","png","gif");
$type = explode("/", $fileObj["type"]);
if(in_array($type['1'], $types)){
//获取文件详细路径
$time = date('Y-m-d');
$path = "./Public/Upload/".$time;
if(!file_exists($path)){
mkdir($path);//创建文件夹
}
//移动文件
$src = $fileObj["tmp_name"];
$dst = $path.'/'.$fileObj['name'];
$res = move_uploaded_file($src,$dst);
if($res){
$infor=array("err"=>0,"msg"=>"文件移动成功","img" => $dst);
}else{
$infor=array("err"=>1,"msg"=>"文件移动失败");
}
}else{
$infor=array("err"=>1,"msg"=>"文件格式不合法");
}
echo json_encode($infor);exit;
}else{
switch ($fileObj["error"]) {
case 1:
// upload_max_filesize = 2M默认最大上传大小为2M
$msg = '上传文件大小超出php.ini设置';
break;
case 2:
// post_max_size = 8M默认最大为8M
$msg = '上传文件大小超出表单设置';
break;
case 4:
$msg = '没有选择上传的文件';
break;
}
$infor=array("err"=>1,"msg"=>"上传的文件有错误");
}
}