利用html5中的file对象利用FormData对象进行上传
前端页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax文件上传</title>
</head>
<script type="text/javascript">
function upfile(){
var pic=document.getElementsByTagName(‘input‘)[0].files;//返回filelist
pic=pic[0];
//console.log(pic);//返回file
var str="文件名称："+pic.name+"<br/>";
str+="文件大小："+pic.size+"字节<br/>";
str+="文件类型："+pic.type+"<br/>";
document.getElementById(‘xinxi‘).innerHTML=str;
//将上传的文件解析到页面上来
var img=document.createElement(‘img‘);
img.src=window.URL.createObjectURL(pic);
document.getElementsByTagName(‘body‘)[0].appendChild(img);
up();
}
function up(){
//alert(‘运行了‘);
var pic=document.getElementsByTagName(‘input‘)[0].files[0];
var fd=new FormData();
var xhr=new XMLHttpRequest();
xhr.open(‘post‘,‘01.php‘,true);
xhr.onreadystatechange=function (){
if(this.readyState==4){
document.getElementById(‘result‘).innerHTML=this.responseText;
}
}
fd.append(‘pic‘,pic);//添加file对象到FormData对象中
xhr.send(fd);
}
</script>
<body>
<div id="result"></div>
<input type="file" name="pic" onchange="upfile();"/>
<div id="xinxi"></div>
</body>
</html>
01.php
<?php
//print_r($_FILES);
if($_FILES[‘pic‘][‘error‘]!=0){
exit(‘上传失败‘);
}
move_uploaded_file($_FILES[‘pic‘][‘tmp_name‘],‘upload/‘.$_FILES[‘pic‘][‘name‘]);//将文件保存到upload目录下
echo ‘上传成功‘;
?>
上传效果
时间： 2024-11-05 14:54:19