Ajax实现文件上传

最新推荐文章于 2024-06-14 11:01:38 发布

dianmei3204

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量80

点赞数

文章标签：前端 javascript php ViewUI

原文链接：http://www.cnblogs.com/lzzhuany/p/4889137.html

版权

利用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" οnchange="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 '上传成功';
?>

上传效果

转载于:https://www.cnblogs.com/lzzhuany/p/4889137.html

dianmei3204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现文件上传

利用html5中的file对象利用FormData对象进行上传前端页面<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax文件上传</title></head&g...
复制链接

扫一扫