Question

所以我一直在处理一个用于图形上传的HTML表单，结果我原本以为更加混乱。我写的代码适用于Chromium 62.0.3202.94，但是在Firefox 57.0上，百分比保持在0％并且不会改变。有谁知道为什么会发生这种情况？这是代码：

<!DOCTYPE html>
<meta charset="UTF-8"> 
<html>
  <head>
    <title>File upload with progress</title>
    <style>
      body { padding: 30px }
      form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

      .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
      .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
      .percent { position:absolute; display:inline-block; top:3px; left:48%; }
    </style>
    <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.open("POST", "upload.php");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById("percent").innerHTML = percentComplete.toString() + "%";
        }
        else {
          document.getElementById("percent").innerHTML = "unable to compute";
        }
      }
    </script>
  </head>
  <body>
    <h1>File upload with progress bar</h1>
    <form action="upload.php" method="POST" enctype="multipart/form-data"> 
      <div class="row">
        <label for="fileToUpload">Select a File to Upload</label><br />
        <input type="file" name="myFile" id="fileToUpload" onchange="fileSelected();">
      </div>
      <div id="fileName"></div>
      <div id="fileSize"></div>
      <div id="fileType"></div>
      <div class="row">
        <input type="submit" onclick="uploadFile()" value="Upload">
      </div>
      <div class="progress">
        <div class="bar"></div>
        <div class="percent" id="percent">0%</div>
      </div>
    </form>
  </body>
</html>

Answer 1

代码存在一个大问题 - 浏览器默认提交操作未被阻止。

防止：

从<form>
从onclick删除<submit>处理程序。改为使用<form onsubmit。
<form onsubmit handler（uploadFile）返回false。

在代码中清理完之后，在Chrome 62.0.3202.94和Firefox 57.0，IE 11中运行之后。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
    <title>File upload with progress</title>
    <style>
        body { padding: 30px }
        form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

        .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
        .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
        .percent { position:absolute; display:inline-block; top:3px; left:48%; }
    </style>
    <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.open("POST", "upload.php");
            xhr.send(fd);
            return false; // Prevent browser default submit action
        }

        function uploadProgress(evt) {
            console.log("uploadProgress", evt);
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById("percent").innerHTML = percentComplete.toString() + "%";
            }
            else {
                document.getElementById("percent").innerHTML = "unable to compute";
            }
        }
    </script>
</head>
<body>
    <h1>File upload with progress bar</h1>
    <form onsubmit="return uploadFile()">
        <div class="row">
            <label for="fileToUpload">Select a File to Upload</label><br />
            <input type="file" name="myFile" id="fileToUpload" onchange="fileSelected();">
        </div>
        <div id="fileName"></div>
        <div id="fileSize"></div>
        <div id="fileType"></div>
        <div class="row">
            <input type="submit" value="Upload">
        </div>
        <div class="progress">
            <div class="bar"></div>
            <div class="percent" id="percent">0%</div>
        </div>
    </form>
</body>
</html>

html图形上传将无法在Firefox上运行

1 个答案: