Home >Web Front-end >JS Tutorial >Native JS upload large file display progress bar PHP file upload code

Native JS upload large file display progress bar PHP file upload code

韦小宝Original: 2018-01-12 09:58:431412browse

This article mainly introduces in detail the JS native upload large file display Progress bar, the key code of PHP file upload, which has certain reference and value for learning JS. For those who are interested in JS upload Partners can refer to this article

JS native upload large file display progress bar, PHP upload file for your reference, the specific content is as follows

Modify the required size in 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 code:

<?php
  //开始上传
  //注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码
  //我们不能直接修改文件的编码，只能临时修改一下php的编码
  $dst_file = $_FILES[&#39;file&#39;][&#39;name&#39;];
  $dst_file = iconv(&#39;utf-8&#39;, &#39;gbk&#39;, $dst_file);
  if(move_uploaded_file($_FILES[&#39;file&#39;][&#39;tmp_name&#39;],$dst_file)){
    $data[&#39;status&#39;] = 1;
  }else{
    $data[&#39;status&#39;] = 0;
  }
  echo json_encode($data);

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

Related recommendations:

javascript previews images before uploading them Compatible with most browsers

js upload image preview

Uploadify.js Refresh the interface after all uploads are successful

The above is the detailed content of Native JS upload large file display progress bar PHP file upload code. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Several jQuery ways to find domNext article：Several jQuery ways to find dom

See more

Native JS upload large file display progress bar PHP file upload code

Related articles