簡體   English   中英

如何在html5,javascript或php中創建進度欄?

[英]How do I create a progress bar in html5, javascript or php?

我已經有了這段代碼,但是我想要的是圖形欄,而不是數字上傳過程……我在這里也注意到了一個問題……progressNumber僅在我單擊提交時顯示,即使沒有選擇文件也是如此。如果選擇文件,則不會顯示progressNumber。

      <script type="text/javascript">



function fileSelected() {




        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';

          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
         // document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
      }

      function uploadFile() {





        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
      xhr.open("POST", "thankyou.php");
      xhr.send(fd);

return false;
      }

      function uploadProgress(evt) {





       if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);




         document.getElementById('progressNumber').innerHTML = percentComplete.toString() + ' % uploading file';

         document.getElementById('progress').style.width = percentComplete + '%';


        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
       // alert(evt.target.responseText);
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
     //   alert("The upload has been canceled by the user or the browser dropped the connection.");
      }

 </script>

以及html表單和輸入標簽

<form id="form1" name = "myform"  onsubmit = "return uploadFile()" enctype="multipart/form-data" action = "thankyou.php"  method="post"  id = "form1" >



<div class="row">
      <label for="fileToUpload">Upload File</label>
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" class = "dropzone" required/>
    </div>
<p>

    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
<div id="progressNumber"></div>


<div id="progress-bg" style="width:200px;height:10px;background:#FFF">
    <div id="progress" style="height:10px;background:#000"></div>
</div>

    <input type="submit"  name="uploadFiles" value="Submit">

HTML5中有一個特殊標記:

<progress value="0.25" id="progressNumber">25%</progress>

“ 25%”將僅在不支持進度標簽的瀏覽器中顯示。 您還可以使用其他語法:

<progress value="25" max="100">25 out of 100</progress>

在這種情況下,您可以使用第一種語法並更改行

document.getElementById('progressNumber').innerHTML = percentComplete.toString() + ' % uploading file';

到線

document.getElementById('progressNumber').innerHTML = percentComplete.toString() + ' % uploading file';
document.getElementById('progressNumber').value = evt.loaded/evt.total;

創建具有固定寬度的進度條背景或容器,並將進度條div放入其中:

<div id="progress-bg" style="width:200px;height:10px;background:#FFF">
    <div id="progress" style="height:10px;background:#000"></div>
</div>

對於進度事件,只需將進度條的寬度設置為已完成的百分比即可。

document.getElementById('progress').style.width = percentComplete + '%';

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM