이 글에서는 주로 대용량 파일의 JS 네이티브 업로드 진행률 표시줄과 PHP 파일 업로드의 키 코드를 자세히 소개합니다. 관심 있는 친구는 이를 참조하여 진행률 표시줄을 표시할 수 있습니다. , 참조용 php 업로드 파일, 구체적인 내용은 다음과 같습니다
php.ini에서 필요한 크기를 수정하세요:
upload_max_filesize = 8M
post_max_size = 10Mmemory_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"> <p id="parent"> <p id="child"></p> </p> <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 파일 업로드 코드는 진행률 표시줄을 표시하기 위해 대용량 파일을 업로드하는 네이티브 JS의 예를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!