ajax实现上传文件进度条

<?php
    header('Content-type:text/html; charset="utf-8"');
$upload_position = 'uploads/';

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
        exit_status(array('code'=>1,'msg'=>'错误提交方式'));
    }

if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){

$pic = $_FILES['file'];

if(move_uploaded_file($pic['tmp_name'], $upload_position.$pic['name'])){
            exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_position.$pic['name']));
        }

    }
echo $_FILES['file']['error'];
    exit_status(array('code'=>1,'msg'=>'出现了一些错误'));

function exit_status($str){
echo json_encode($str);
exit;
    }
?>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id='input'/>
<input type="button" value='获取' id='btn'/>
<script type="text/javascript">
 btn.onclick = function(){
//console.log( input.value );
//console.log( input.files );
//console.log( input.files[0] );
var xhr = new XMLHttpRequest();
 xhr.onload = function(){
 alert('上传成功');
 };
var oUpload = xhr.upload;
//console.log(oUpload);
 oUpload.onprogress = function(e){
 console.log('当前进度'+e.loaded+'总进度'+e.total);
 };
 xhr.open('post','postFile.php',true);

var oFormData = new FormData();
 oFormData.append('file',input.files[0]);
 xhr.send(oFormData);
 }
</script>
</body>
</html>

ajax实现上传文件进度条

秒客网

ajax实现上传文件进度条

相关文章