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.onprogress=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='提交' onclick='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 '文件上傳成功！';
?>結果截圖如下：
