原生JS上傳大文件顯示進(jìn)度條 php上傳文件代碼
JS原生上傳大文件顯示進(jìn)度條,php上傳文件,供大家參考,具體內(nèi)容如下
在php.ini修改需要的大?。?/p>
upload_max_filesize = 8M
post_max_size = 10M
memory_limit = 20M
<!DOCTYPE html> <html> <head> <title>原生JS大文件顯示進(jìn)度條</title> <meta charset="UTF-8"> <style type="text/css"> #parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px} #child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px} </style> <script type="text/javascript"> function $(id){ return document.getElementById(id); } </script> </head> <body> <form action="" method="post"> <div id="parent"> <div id="child"></div> </div> <p>上傳文件:<input type="file" name="file"></p> <p><input type="submit" value="提交" id="submit"></p> </form> <script type="text/javascript"> var oForm = document.getElementsByTagName('form')[0]; var oSubmit = $('submit'); //如果多個(gè)人同時(shí)提交這個(gè)表單的時(shí)候,由于是異步的請(qǐng)求,互不影響 oSubmit.onclick = function(){ try{ var xhr = new XMLHttpRequest(); }catch(e){ var xhr = new ActiveXObject("Msxml2.XMLHTTP"); } xhr.upload.onprogress = function(e){ var ev = e || window.event; var percent = Math.floor((ev.loaded / ev.total)*100); // console.log(percent); //將百分比顯示到進(jìn)度條 $('parent').style.display = 'block'; $('child').style.display = 'block'; //將上傳進(jìn)度的百分比顯示到child里面 $('child').style.width = percent+'%'; $('child').style.textAlign = 'center'; $('child').innerHTML = percent+'%'; //判斷如果百分比到達(dá)100%時(shí)候,隱藏掉 if(percent==100){ $('parent').style.display = 'none'; $('child').style.display = 'none'; } } xhr.open('post','progress.php',true); var form = new FormData(oForm); xhr.send(form); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ eval("var obj ="+xhr.responseText); if(obj.status){ alert('上傳成功'); }else{ alert('上傳失敗'); } } } //阻止表單提交 return false; } </script> </body> </html>
<?php //開始上傳 //注意:文件是windows系統(tǒng)的文件,采用的gbk編碼,php文件使用的是utf-8編碼 //我們不能直接修改文件的編碼,只能臨時(shí)修改一下php的編碼 $dst_file = $_FILES['file']['name']; $dst_file = iconv('utf-8', 'gbk', $dst_file); if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){ $data['status'] = 1; }else{ $data['status'] = 0; } echo json_encode($data);
更多精彩內(nèi)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》,《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于JS實(shí)現(xiàn)視頻上傳顯示進(jìn)度條
- JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
- js實(shí)現(xiàn)帶進(jìn)度條提示的多視頻上傳功能
- 原生javascript上傳圖片帶進(jìn)度條【實(shí)例分享】
- 利用Plupload.js解決大文件上傳問題, 帶進(jìn)度條和背景遮罩層
- PHP + plupload.js實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條加刪除實(shí)例代碼
- JS插件plupload.js實(shí)現(xiàn)多圖上傳并顯示進(jìn)度條
- js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能
- PHP中使用Session配合Javascript實(shí)現(xiàn)文件上傳進(jìn)度條功能
- JS實(shí)現(xiàn)上傳文件顯示進(jìn)度條
相關(guān)文章
Javascript 判斷 object 的特定類轉(zhuǎn)載
Javascript 判斷 object 的特定類轉(zhuǎn)載...2007-02-02js中的eval()函數(shù)把含有轉(zhuǎn)義字符的字符串轉(zhuǎn)換成Object對(duì)象的方法
下面小編就為大家?guī)硪黄猨s中的eval()函數(shù)把含有轉(zhuǎn)義字符的字符串轉(zhuǎn)換成Object對(duì)象的方法。小編覺的挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12JS 有趣的eval優(yōu)化輸入驗(yàn)證實(shí)例代碼
這篇文章介紹了eval優(yōu)化輸入驗(yàn)證實(shí)例代碼,有需要的朋友可以參考一下2013-09-09