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

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

黄舟

풀어 주다： 2023-03-16 16:24:02

원래의

1626명이 탐색했습니다.

이 글에서는 주로 대용량 파일의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!