Nativer JS-Upload großer Dateien zeigt Fortschrittsbalken an PHP-Datei-Upload-Code-js-Tutorial-php.cn

Nativer JS-Upload großer Dateien zeigt Fortschrittsbalken an PHP-Datei-Upload-Code

韦小宝

Freigeben： 2018-01-12 09:58:43

Original

1422 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die Anzeige des nativen JS-Uploads für große Dateien und der Schlüsselcode für das Hochladen von PHP-Dateien vorgestellt. Für diejenigen, die sich für JS interessieren Upload-Partner können sich auf diesen Artikel beziehen

JS lädt nativ große Dateien hoch, um den Fortschrittsbalken anzuzeigen, und PHP lädt Dateien als Referenz hoch. Der spezifische Inhalt ist wie folgt

Ändern Sie die erforderliche Größe in php.ini:

upload_max_filesize = 8M

post_max_size = 10M

<!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>

Nach dem Login kopieren

Das Obige ist das Ganze Ich hoffe, dass der Inhalt dieses Artikels zum Lernen aller beiträgt und dass jeder die chinesische PHP-Website unterstützt.

Verwandte Empfehlungen:

Javascript-Vorschaubilder vor dem Hochladen, kompatibel mit den meisten Browsern

<?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);

Nach dem Login kopieren

JS-Upload-Bildvorschau

Aktualisieren Sie die Benutzeroberfläche, nachdem alle Uploadify.js-Uploads erfolgreich waren

Das obige ist der detaillierte Inhalt vonNativer JS-Upload großer Dateien zeigt Fortschrittsbalken an PHP-Datei-Upload-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!