原生ajax上传文件+进度条

最新推荐文章于 2022-08-12 15:27:48 发布

weixin_30881367

最新推荐文章于 2022-08-12 15:27:48 发布

阅读量162

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/mengor/p/8342000.html

版权

<!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 "上传失败";
}

转载于:https://www.cnblogs.com/mengor/p/8342000.html

weixin_30881367

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生ajax上传文件+进度条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫