原生js上传图片利用XHR的ProgressEvent对象diy进度条

最新推荐文章于 2024-02-02 09:25:54 发布

luck_lin

最新推荐文章于 2024-02-02 09:25:54 发布

阅读量3.5k

点赞数 1

分类专栏： javascript 文章标签： XHR ProgressEvent

本文链接：https://blog.csdn.net/qwe502763576/article/details/79840158

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type='text/css'>
      #progress{
         width:400px;
         height:20px;
         border:solid 1px black;
      }
      #bar{
         background:#CAFFFF;
         width:50%;
         height:19px;
      }

    </style>
    <script type="text/javascript">
     function createXHR(){
        var xhr=null;
       if(window.XMLHttpRequest)  //要是支持XMLHttpRequest的则采用XMLHttpRequest生成对象
          xhr=new XMLHttpRequest();
       else if(window.ActiveXobiect)//要是支持win的ActiveXobiect则采用ActiveXobiect生成对象。
         xhr=new ActiveXobiect('Microsoft.XMLHTTP');
        return xhr;
     }
     function ajax_upload(){
       var xhr = createXHR();
       var formData=new FormData();
       var file = document.getElementsByTagName('input')[0].files[0];
       var info = '文件名:'+file.name+' 文件类型:'+file.type+' 文件大小:'+file.size;
       var showInfo=document.getElementById('showinfo');
       var bar=document.getElementById('bar');
       var progress=document.getElementById('progress');
       showInfo.innerHTML= info;
       formData.append('pic', file);
       var schedule = 0;
        //xhr.upload.onprogress是回调函数，接收参数d是ProgressEvent对象，d.loaded表示已经上传的，d.total表示文件总大小。
       xhr.upload.οnprοgress=function(d){
           progress.style.display='block';
           schedule = d.loaded/d.total*100;
           schedule = schedule.toFixed(2);
           console.log(d);
           bar.style.width = schedule+'%';
           bar.innerHTML = schedule+'%';
       }
       xhr.open('POST', 'http://127.0.0.1/php/move_file.php', true);
       xhr.send(formData);
       xhr.onreadystatechange = function(){
         if( this.readyState == 4 && this.status == 200){
            showInfo.innerHTML = showInfo.innerHTML+'<br />'+this.responseText;
            progress.style.display = 'none';
         }
       }
     }
    </script>
</head>
<body>
    <input type='file' name='pic' />
    <input type='submit' value='提交' οnclick='ajax_upload();'/>
    <div id='showinfo'></div>
    <br />
    <div id='progress' style='display:none;text-align:center;'>
       <div id='bar' style='text-align:right;'></div>
    </div>
</body>
</html>

PHP文件：

<?php  
header("Access-Control-Allow-Origin:*");
header('Content-Type:text/html;charset=utf-8');
if(empty($_FILES))die('上传为空文件');  
if($_FILES['pic']['error']!=0)die('文件上传出错');  
/* 
  需要注意的是，一般我们在测试开发时是在，window系统上的继承环境上的，而window上是gbk2312编码 
  要想存储的文件名也是中文的话，要从utf-8转为gbk2312,linux系统则不用，因为linux系统是utf-8编码 
*/  
$content = iconv( "utf-8","gb2312", $_FILES['pic']['name']);  
move_uploaded_file($_FILES['pic']['tmp_name'],'./'.$content);  
echo '文件上传成功！';  
?>

progress事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、loaded和total。其中，lengthComputable是一个表示进度信息是否可用的布尔值，loaded表示已经接收的字节数， total表示根据Content-Length响应头部确定的预期字节数.

为确保正常执行，必须在调用open()方法之前添加onprogress事件处理程序。在前面的例子中，每次触发progress事件，都会以新的状态信息更新HTML元素的内容。当然也可以配合H5的标签<progress value="5" max="10">来实现进度条。

luck_lin

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
原生js上传图片利用XHR的ProgressEvent对象diy进度条

Document #progress{ width:400px; height:20px; border:solid 1px black; } #bar{ background:#CAFFFF; width:50%; height:19px;
复制链接

扫一扫