原生js上傳圖片利用XHR的ProgressEvent物件diy進度條
阿新 • • 發佈：2019-02-03
<!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.onprogress=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='提交' 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> </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">來實現進度條。