<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#out{
width:300px;
height:20px;
border:1px solid #ccc;
margin:5px 0px;
}
#in{
width:0%;
height:20px;
background-color: #090;
}
</style>
</head>
<body>
<form action="" id='frm'>
头像: <input type="file" name='face'><br>
<div id='out'><div id='in'></div></div>
<input type="button" value="上传" id='btn'>
</form>
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var frm=document.getElementById('frm');
var formdata=new FormData(frm);
var xhr=new XMLHttpRequest();
xhr.open('post','demo.php');
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
if(xhr.responseText){
alert('上传成功');
}else{
alert('上传失败');
}
}
};
//设置onprogress事件,当上传正在进行的时候
xhr.upload.onprogress=function(e){
var total=e.total; //文件总大小
var loaded=e.loaded;//已经上传的文件大小
var per=Math.floor(loaded/total*100)+'%';
var oDiv=document.getElementById('in');
oDiv.style.width=per;
oDiv.innerHTML=per;
};
xhr.send(formdata);
};
};
</script>
</body>
</html>
demo.php
<?php
$path=uniqid('',true).strrchr($_FILES['face']['name'],'.');
echo move_uploaded_file($_FILES['face']['tmp_name'],$path)?1:0;
小结
使用FormData上传文件不需要设置表单的enctype属性。因为FormData会将表单所有的数据收集后一起提交。
为了可以测试,在php.ini中设置上传最大值
post_max_size = 1024M 最大上传大小
upload_max_filesize = 1024M 上传附件大小限制
步骤:
1、创建FormData对象,收集表单上传的信息
2、创建AJAX对象
3、AJAX发送FormData对象
4、每隔100毫秒计算一下已经上传的百分比