ajax和HTML5异步文件上传之进度条

最新推荐文章于 2022-10-23 18:18:43 发布

aozeahj

最新推荐文章于 2022-10-23 18:18:43 发布

阅读量2.5k

点赞数

分类专栏： ajax技术

本文链接：https://blog.csdn.net/aozeahj/article/details/53019388

版权

ajax技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ajax和HTML5异步文件上传之进度条

在之前的文章中已经介绍过ajax的异步文件上传，这篇文主要是在上一篇文章的基础上，添加了一个上传进度条。

主要是思路是：在XMLHttpRequest的2版本中，添加了一个新的对象 upload，在这个对象实现了对上传进度的监控事件，通过

事件属性upload的onprogress事件属性可以实时获得当前上传的大小，以及文件的总大小。然后通过js不断设置html标签的css实现一个简单的进度条效果。

前台文件upload.html全部代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
    <title>ajax异步文件上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
	<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);
	   xhr.open('POST','./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';
		 }
	    
	   }
	   var schedule=0;
	   xhr.upload.οnprοgress=function(d){ //为事件属性设置回调函数，在回调函数中计算当前进度，回调函数中的d表示当前传入的参数，d.loaded表示已经上传的，d.total表示文件总大小。
	       progress.style.display='block';
	       schedule=d.loaded/d.total*100;
		   schedule=schedule.toFixed(2);
		   console.log(bar);
	       bar.style.width=schedule+'%';
		   bar.innerHTML=schedule+'%';
	   }
	 }
    </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>

这部分的是核心，最开始隐藏代表进度条的div，一旦开始上传文件，显示进度条，并将通过已经上传文件的大小所占百分比，控制id=bar的div宽度变化，同时将百分比写到bar中，使用百分比表示当前的上传进度。

后台文件文件move_file.php全部代码如下：

<?php
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 '文件上传成功！';
?>

结果截图如下：

aozeahj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax和HTML5异步文件上传之进度条

ajax和HTML5异步文件上传之进度条在之前的文章中已经介绍过ajax的异步文件上传，这篇文主要是在上一篇文章的基础上，添加了一个上传进度条。主要是思路是：在XMLHttpRequest的2版本中，添加了一个新的对象 upload，在这个对象实现了对上传进度的监控事件，通过事件属性upload的onprogress事件属性可以实时获得当前上传的大小，以及文件的
复制链接

扫一扫