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

HTML5 には特別なタグがあります。

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

「25%」は、progress タグをサポートしていないブラウザーでのみ表示されます。別の構文を使用することもできます。

<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 に答える