JS原生上傳大文件顯示進度條，php上傳文件，供大家參考，具體內容如下
在php.ini修改需要的大小：
upload_max_filesize = 8M
post_max_size = 10M
memory_limit = 20M
<!DOCTYPE html><html><head> <title>原生JS大文件顯示進度條</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'); //如果多個人同時提交這個表單的時候，由于是異步的請求，互不影響 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); //將百分比顯示到進度條 $('parent').style.display = 'block'; $('child').style.display = 'block'; //將上傳進度的百分比顯示到child里面 $('child').style.width = percent+'%'; $('child').style.textAlign = 'center'; $('child').innerHTML = percent+'%'; //判斷如果百分比到達100%時候，隱藏掉 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系統的文件，采用的gbk編碼，php文件使用的是utf-8編碼 //我們不能直接修改文件的編碼，只能臨時修改一下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);以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
