php 使用html5 XHR2實(shí)現(xiàn)上傳文件與進(jìn)度顯示功能示例
本文實(shí)例講述了php 使用html5 XHR2實(shí)現(xiàn)上傳文件與進(jìn)度顯示功能。分享給大家供大家參考，具體如下：
思路：只要我們知道上傳文件的總大小，還有上傳過(guò)程中上傳文件的大小，那么就可以實(shí)現(xiàn)進(jìn)度顯示了。
在html5中，XMLHttpRequest對(duì)象，傳送數(shù)據(jù)的時(shí)候，progress事件用來(lái)返回進(jìn)度信息。
它分成上傳和下載兩種情況
1.下載的progress事件屬于XMLHttpRequest對(duì)象2.上傳的progress事件屬于XMLHttpRequest.upload對(duì)象。
與progress事件相關(guān)的，還有其他五個(gè)事件：
1.load事件：傳輸成功完成。2.abort事件：傳輸被用戶取消。3.error事件：傳輸中出現(xiàn)錯(cuò)誤。4.loadstart事件：傳輸開(kāi)始。5.loadEnd事件：傳輸結(jié)束，但是不知道成功還是失敗。
<!DOCTYPE HTML><html lang='zh-CN'><head> <meta charset='UTF-8'> <title></title></head><body> <form method='post' id='myForm'> <input type='file' name='file' /> <input type='submit' name='submit' value='提交' /> </form> <div id='upStatus'></div></body><script type='text/javascript'> var myForm = document.getElementById('myForm'); var upfile = document.getElementById('upfile'); myForm.onsubmit = function() { //我們創(chuàng)建一個(gè)FormData對(duì)象 var fd = new FormData(); var file = upfile.files[0]; //把文件添加到FormData對(duì)象中 fd.append('file', file); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) {alert(this.responseText); } }; xhr.open('post', 'upfile.php', true); //監(jiān)聽(tīng)上傳事件 xhr.upload.onprogress = function(ev) { //如果長(zhǎng)度是可計(jì)算的 if(ev.lengthComputable) {var percent = Math.round((ev.loaded / ev.total) * 100);document.getElementById('upStatus').innerHTML = percent + '%'; } }; //發(fā)送FormData對(duì)象 xhr.send(fd); return false; };</script></html>
upfile.php代碼如下：
<?php$uploadDir = ’./upload/’;if(!file_exists($uploadDir)) { @mkdir($uploadDir, 0777, true);}$uploadFile = $uploadDir . basename($_FILES[’file’][’name’]);if(move_uploaded_file($_FILES[’file’][’tmp_name’], $uploadFile)) { echo 'OK';} else { echo 'NO';}
如果上傳過(guò)程中PHP出現(xiàn)如下信息：
Warning: POST Content-Length of 625523488 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
說(shuō)明文件大小超出了PHP設(shè)置限制，可以設(shè)置php.ini
;腳本解析輸入數(shù)據(jù)(類似 POST 和 GET)允許的最大時(shí)間，單位是秒。;它從接收所有數(shù)據(jù)到開(kāi)始執(zhí)行腳本進(jìn)行測(cè)量的。max_input_time = 60;允許客戶端單個(gè)POST請(qǐng)求發(fā)送的最大數(shù)據(jù)post_max_size = 64M;是否開(kāi)啟文件上傳功能file_uploads = On;文件上傳的臨時(shí)存放目錄(如果不指定，使用系統(tǒng)默認(rèn)的臨時(shí)目錄);upload_tmp_dir =;允許單個(gè)請(qǐng)求上傳的最大文件大小upload_max_filesize = 64M;允許單個(gè)POST請(qǐng)求同時(shí)上傳的最大文件數(shù)量max_file_uploads = 20
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《php文件操作總結(jié)》、《PHP目錄操作技巧匯總》、《PHP常用遍歷算法與技巧總結(jié)》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計(jì)算法總結(jié)》及《PHP網(wǎng)絡(luò)編程技巧總結(jié)》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. 前端從瀏覽器的渲染到性能優(yōu)化2. ASP實(shí)現(xiàn)加法驗(yàn)證碼3. 利用CSS3新特性創(chuàng)建透明邊框三角4. 讀大數(shù)據(jù)量的XML文件的讀取問(wèn)題5. 解析原生JS getComputedStyle6. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)7. css代碼優(yōu)化的12個(gè)技巧8. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)9. ASP基礎(chǔ)入門(mén)第三篇(ASP腳本基礎(chǔ))10. PHP循環(huán)與分支知識(shí)點(diǎn)梳理
網(wǎng)公網(wǎng)安備