0

我已经有了这个代码，但是我想要的不是数字上传进度，而是一个图形栏...我在这里也注意到了一个问题...如果我点击提交，即使没有选择文件，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">
4

2 回答 2

0

创建具有固定宽度的进度条背景或容器，并将进度条 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 + '%';
于 2013-04-13T16:15:10.553 回答
0

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;
于 2013-04-13T16:12:31.680 回答