<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>上传文件</title>
<style>
#big{
width:300px;
height:30px;
background-color:rgb(224, 229, 233);
border:solid 1px #ccc;
}
#small{
width:0px;
height:28px;
background-color:rgb(211, 25, 25);
border:solid 1px #ccc;
}
</style>
<script>
function t(){
var xhr= new XMLHttpRequest();
xhr.upload.onprogress=function(evt){
//这里的evt表示onprogress
//console.log(evt);
var baifenbi=Math.round((evt.loaded/evt.total)*100)+'%';
document.getElementById('small').style.width=baifenbi;
}
xhr.open('post','index.php',true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//console.log(xhr.responseText);
}
}
//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// var submit=document.getElementById('submit').value;
// var upload=document.getElementById('upload').value;
// xhr.send('submit='+submit+'&upload='+upload);
var fm=document.getElementsByTagName('form')[0];
var data=new FormData(fm);
xhr.send(data);
}
</script>
</head>
<body>
<form action="" >
<!-- <input type="file" id="upload" name="upload"></input> -->
<input type="file" name="upload">
<input type="button" value="上传" onclick="t()"></input>
</form>
<div id="big">
<div id="small"></div>
</div>
</body>
</html>
<?php
header('content-type:text/html;charset=utf-8');
//第一步：判断是否是http post上传的
// if(!is_uploaded_file($_FILES['upload']['tmp_name'])){
// exit('非法上传');
// }
//第二步：判断是否有错误
if($_FILES['upload']['error']!=0){
exit('上传文件错误');
}
//第三步：判断文件类型
$fs = finfo_open(FILEINFO_MIME_TYPE); //得到一个mime类型资源
$mime= finfo_file($fs,$_FILES['upload']['tmp_name']); //上文文件得mime类型
$arr= array('image/jpeg','image/png','image/gif'); //允许上传的mime类型
if(!in_array($mime,$arr)){
exit('上传类型不符');
}
//第四步：获取文件拓展名
$index=strrpos($_FILES['upload']['name'],'.'); //获取文件最后一个点的位置
$ext=substr($_FILES['upload']['name'],$index); //取出扩展名
//第五步：判断文件大小，允许，上传小于2M的文件
if($_FILES['upload']['size']>2*1024*1024){
exit('文件上传过大');
}
//第六步：临时文件
$filename=$_FILES['upload']['tmp_name'];
//第七步：构建目标文件
$path='./upload';
@mkdir($path);
$destionation=$path.'/'.uniqid().$ext;
//第八部：正式上传
if(move_uploaded_file($filename,$destionation)){
echo "上传成功";
}else{
echo "上传失败";
}
