HTML5上传文件（不含进度条）：XHR2+FILE+FormData

最新推荐文章于 2022-02-21 07:00:00 发布

原创最新推荐文章于 2022-02-21 07:00:00 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

本文介绍了一种利用HTML5的File API实现文件上传的方法。通过使用JavaScript的FormData对象收集文件数据，并借助Ajax进行异步上传。同时展示了如何在服务器端（PHP）处理上传的文件。

主要用到了三个方面的技术：
1.使用FILE的API获取待上传的文件对象，比如pic
var pic = document.getElementsByTagName("input")[0].files[0];
2.再使用FormData对象收集待发送的数据，参数其中之一是上面file获取到的对象pic
var fd = new FormData();
fd.append('pic',pic);
3.使用Ajax发送
var xhr = new XMLHttpRequest();
xhr.open('POST','fileup.php',true);
xhr.onreadystatechange = function(){
if(this.readyState ==4)
{
document.getElementById('debug').innerHTML = this.responseText;
}

}

xhr.send(fd);

具体代码如下：

html5up.html如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>fileAPI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
	function selfile()
	{
		//创建formData对象
		var fd = new FormData();

		//获取文件对象
		var pic = document.getElementsByTagName("input")[0].files[0];
		
		//把文件内容追加到表单数据里
		fd.append('pic',pic);

		var xhr = new XMLHttpRequest();
		xhr.open('POST','fileup.php',true);
		xhr.onreadystatechange = function(){
			if(this.readyState ==4)
			{
				document.getElementById('debug').innerHTML = this.responseText;
			}
		}

		xhr.send(fd);
		

	}
</script>
</head>
    <body>
    	<input type="file" name="pic" onchange="selfile();" />
    	<div id="debug"></div>
    </body>
</html>

用到的fileup.php如下：

<?php 
//print_r($_FILES);

if(empty($_FILES))
{
	exit ('no file');
}

if ($_FILES['pic']['error']!=0) {
	exit ('fail');
}

move_uploaded_file($_FILES['pic']['tmp_name'], 'upload/'.$_FILES['pic']['name']);
echo 'ok';
?>