PHP實(shí)現(xiàn)帶進(jìn)度條的Ajax文件上傳功能示例
本文實(shí)例講述了PHP實(shí)現(xiàn)帶進(jìn)度條的Ajax文件上傳功能。分享給大家供大家參考,具體如下:
之前分享了一篇關(guān)于 php使用FileApi實(shí)現(xiàn)Ajax上傳文件 的文章,里面的Ajax文件上傳是不帶進(jìn)度條的,今天分享一篇關(guān)于帶進(jìn)度條的Ajax文件上傳文章。
效果圖:
項(xiàng)目結(jié)構(gòu)圖:
12-progress-upload.html文件:
頁(yè)面中主要有一個(gè)上傳文件控件,有文件被選擇時(shí)響應(yīng)selfile()方法,接著利用js讀取上傳文件、創(chuàng)建FormData對(duì)象和xhr對(duì)象,利用xhr2的新標(biāo)準(zhǔn),寫(xiě)一個(gè)監(jiān)聽(tīng)上傳過(guò)程函數(shù),請(qǐng)求11-fileApi.php文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>HTML5帶進(jìn)度條的上傳功能</title> <link rel="stylesheet" href=""> <script> function selfile(){ //js讀取上傳文件 var file = document.getElementsByTagName('input')[0].files[0]; //創(chuàng)建FormData對(duì)象 var fd = new FormData(); fd.append('pic',file); //ajax上傳文件 var xhr = new XMLHttpRequest(); xhr.open('POST','11-fileApi.php',true); //利用xhr2的新標(biāo)準(zhǔn),為上傳過(guò)程,寫(xiě)一個(gè)監(jiān)聽(tīng)函數(shù) xhr.upload.onprogress = function(ev){ if(ev.lengthComputable){//文件長(zhǎng)度可計(jì)算 var percent = 100*ev.loaded/ev.total;//計(jì)算上傳的百分比 document.getElementById('bar').style.width = percent + '%';//更改上傳進(jìn)度 document.getElementById('bar').innerHTML = parseInt(percent)+'%';//顯示上傳進(jìn)度 } } xhr.send(fd);//發(fā)送請(qǐng)求 } </script> <style> #progress{ width:500px; height:30px; border:1px solid green; } #bar{ width:0%; height:100%; background-color: green; } </style> </head> <body> <h1>HTML5帶進(jìn)度條的上傳功能</h1> <div id="progress"> <div id="bar"></div> </div> <input type="file" name="pic" onchange="selfile();" /> </body> </html>
11-fileApi.php文件:
首先判斷是否有文件上傳,然后判斷文件上傳是否成功,最后移動(dòng)文件至當(dāng)前目錄下的upload目錄下,文件名不變。
<?php /** * fileApi實(shí)現(xiàn)Ajax上傳文件 * @author webbc */ if(empty($_FILES)){ exit('no file'); } if($_FILES['pic']['error'] !== 0){ exit('fail'); } move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/'.$_FILES['pic']['name']); ?>
更多關(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ì)有所幫助。
- 基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析
- 利用SpringMVC和Ajax實(shí)現(xiàn)文件上傳功能
- php+ajax 文件上傳代碼實(shí)例
- AjaxUpLoad.js實(shí)現(xiàn)文件上傳
- AjaxUpLoad.js實(shí)現(xiàn)文件上傳功能
- php+ajax實(shí)現(xiàn)無(wú)刷新文件上傳功能(ajaxuploadfile)
- ajaxFileupload實(shí)現(xiàn)多文件上傳功能
- AjaxFileUpload+Struts2實(shí)現(xiàn)多文件上傳功能
- AjaxFileUpload結(jié)合Struts2實(shí)現(xiàn)多文件上傳(動(dòng)態(tài)添加文件上傳框)
- Ajax實(shí)現(xiàn)文件上傳功能(Spring MVC)
相關(guān)文章
php中拷貝構(gòu)造函數(shù)、賦值運(yùn)算符重載
php中拷貝構(gòu)造函數(shù)、賦值運(yùn)算符重載方法, 需要的朋友可以參考下2012-07-07php 轉(zhuǎn)換字符串編碼 iconv與mb_convert_encoding的區(qū)別說(shuō)明
php 轉(zhuǎn)換字符串編碼 iconv與mb_convert_encoding的區(qū)別說(shuō)明,需要的朋友可以參考下。2011-11-11smarty模板嵌套之include與fetch性能測(cè)試
使用模板時(shí)難免要碰到模板嵌套的時(shí)候,大家都知道有兩種方法可以實(shí)現(xiàn),以下是個(gè)人早期的一些使用感受。2010-12-12在PHP中使用反射技術(shù)的架構(gòu)插件使用說(shuō)明
基于反射的插件架構(gòu)實(shí)際上并沒(méi)有歸類為一種模式,因?yàn)樗鼘?shí)際上不是一個(gè)模板,而是一糸列組合在一起的形成程序架構(gòu)的概念。2010-05-05php版銀聯(lián)支付接口開(kāi)發(fā)簡(jiǎn)明教程
這篇文章主要介紹了php版銀聯(lián)支付接口開(kāi)發(fā)的方法,結(jié)合實(shí)例形式分析了php銀聯(lián)支付接口開(kāi)發(fā)的具體流程與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10關(guān)于在php.ini中添加extension=php_mysqli.dll指令的說(shuō)明
關(guān)于在php.ini中添加extension=php_mysqli.dll指令的說(shuō)明...2007-06-06smarty中先strip_tags過(guò)濾html標(biāo)簽后truncate截取文章運(yùn)用
strip_tags() 函數(shù)剝?nèi)?HTML、XML 以及 PHP 的標(biāo)簽。2010-10-10