집 > 기사 > 백엔드 개발 > PHP 파일 업로드 코드는 진행률 표시줄을 표시하기 위해 대용량 파일을 업로드하는 네이티브 JS의 예를 구현합니다.

PHP 파일 업로드 코드는 진행률 표시줄을 표시하기 위해 대용량 파일을 업로드하는 네이티브 JS의 예를 구현합니다.

黄舟원래의: 2017-10-14 09:20:451598검색

이 글에서는 주로 대용량 파일의 JS 네이티브 업로드 진행률 표시줄과 PHP 파일 업로드의 키 코드를 자세히 소개합니다. 관심 있는 친구는 이를 참조하여 진행률 표시줄을 표시할 수 있습니다. , 참조용 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">
    <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(&#39;form&#39;)[0];
    var oSubmit = $(&#39;submit&#39;);
    //如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响
    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);
        //将百分比显示到进度条
        $(&#39;parent&#39;).style.display = &#39;block&#39;;
        $(&#39;child&#39;).style.display = &#39;block&#39;;
        //将上传进度的百分比显示到child里面
        $(&#39;child&#39;).style.width = percent+&#39;%&#39;;
        $(&#39;child&#39;).style.textAlign = &#39;center&#39;;
        $(&#39;child&#39;).innerHTML = percent+&#39;%&#39;;
        //判断如果百分比到达100%时候，隐藏掉
        if(percent==100){
          $(&#39;parent&#39;).style.display = &#39;none&#39;;
          $(&#39;child&#39;).style.display = &#39;none&#39;;
        }
      }
      xhr.open(&#39;post&#39;,&#39;progress.php&#39;,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(&#39;上传成功&#39;);
          }else{
            alert(&#39;上传失败&#39;);
          }
        }
      }
      //阻止表单提交
      return false;
    }
  </script>
</body>
</html>

으아아아

위 내용은 PHP 파일 업로드 코드는 진행률 표시줄을 표시하기 위해 대용량 파일을 업로드하는 네이티브 JS의 예를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：PHP 문자열 대체 str_replace() 함수 사용 소개다음 기사：PHP 문자열 대체 str_replace() 함수 사용 소개