javascript - 这些可见性设置适用于除 Safari 之外的所有浏览器。为什么？

Question

这些可见性设置适用于除 Safari 之外的所有浏览器。我正在失去理智试图找出原因。 JS 脚本位于 html 部分。我知道代码通过了“if (pass == true) {”部分，因为当我添加它时会弹出一个 javascript 警告通知。不过，它似乎完全忽略了可见性设置。

请帮忙!哈哈

更新:开始看起来像是 php 信息处理我的表单的方式有问题。如果我在上传文件时点击“提交”后点击“停止”，可见性设置就会生效。其他所有浏览器似乎都会在进行文件上传之前更新可见性设置。为什么 Safari 会先等待文件上传完成？

编辑:添加了完整的 javascript，以便您可以看到我的文件上传检查

编辑:添加我的表单和 php 检查信息以查看表单如何接收此脚本

HTML/PHP

<?php
      if (isset($_POST['submitted'])) {
        $currentband = $_POST['band'];
        $currentband = strtolower($currentband);
        $pass = true;
        $handle = fopen("submissions.oi","r");
        $line = fgets($handle); $line = fgets($handle);
        $line = trim($line);
        $oldband = strtolower($line);
        $x = 1;
        if ($oldband == $currentband) { $pass = false; }
        while ($line != '') {
          for ($i = 0; $i <= 5; $i++) {
            $line = fgets($handle);
          }
          $line = trim($line);
          $oldband = strtolower($line);
          if ($oldband == $currentband) { $pass = false; }
          $x += 1;
        }
        if ($pass == true) { echo '<div id="thumbsup"> </div>'; }
        else if ($pass == false) { echo '<div id="sadface"> </div>'; }
      }
      else { echo '<div id="upload"> </div>'; }
    ?>
      <h2 style="font-style:italic;">Submit your music</h2>
      <h3><p><font size="4">If you're ready to get involved in a fresh new approach to music distribution, we encourage you to upload one of your songs.<br>As one of our select few guests, we guarantee that your single will be broadcast during the first round of voting.<br>That's right! YOU will definitely be heard in the very first round of broadcasting, no matter what.</font></p>
      <font size="2">
      <?php
        if (isset($_POST['submitted'])) {
          if ($pass == true) {
            $filename = ''.time().stripslashes($_FILES['datafile']['name']);
            if ($_POST['testing'] == '') { $testing = 'No';}
            else if ($_POST['testing'] == 'Yes') { $testing = 'Yes';}
            $file = fopen("submissions.oi","a");
            fwrite($file, $_POST['email'] . "\n" . $_POST['band'] . "\n" . $_POST['song'] . "\n" . $filename . "\n" . $testing . "\n" ."\n");
            fclose($file);
            $target_path = "submissions/";
            $target_path = $target_path . basename( $filename);
            move_uploaded_file(stripslashes($_FILES['datafile']['tmp_name']), $target_path);
            if ($testing == 'Yes') { $testmsg = 'want'; }
            else if ($testing == 'No') { $testmsg = 'NOT want'; }
            $to = "submissions@ourindustry.net";
            $from = $_POST['email'];
            $band_name = stripslashes($_POST['band']);
            $song_name = stripslashes($_POST['song']);
            $subject = "A new song submission has been received!";
            $message = "\"" . $band_name . "\" has submitted their song \"" . $song_name . "\" and does " . $testmsg . " to be included in future testing." . "\n \n" . "This is submission #: " . $x . "\n" . "File name: " . $filename;
            $headers = "From: " . $from;
            mail($to,$subject,$message,$headers);
            $to = $_POST['email'];
            $from = "alpha@ourindustry.net";
            $subject = "Thank you for submitting your song to OUR INDUSTRY";
            $message = "<p>Dear \"" . $band_name . "\",</p><p>Thank you for submitting your song \"" . $song_name . "\".<br>By doing so you have secured yourself a position in the upcoming voting round.<br>We will be in touch soon when the next alpha phase begins.<br>Please add this e-mail address to your whitelist.</p><p><a href='http://www.ourindustry.net/'>www.ourindustry.net</a></p>";
            $headers = "From: " . $from . "\r\n";
            $headers .= 'MIME-Version: 1.0' . "\r\n";
            $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
            mail($to,$subject,$message,$headers);          
            echo '<script>document.getElementById(\'patience\').style.visibility=\'hidden\';</script><center><div id="thumbsup-dim" style="right: 0; left:0;"></div><br><br><table style="width: 700px; height:220px;" cellpadding="2"><tbody><tr><td><h4 style="font-style:italic; font-size:28px;">Your upload was successful!<br></h4><h4 style="font-style:italic; font-size:20px;">We will be in touch as soon<br>as the voting round begins.</h4></td></tr></tbody></table></center></font>';
          }
          else if ($pass == false) {
            echo '<script>document.getElementById(\'patience\').style.visibility=\'hidden\';</script><center><div id="sadface-dim" style="right: 0; left:0;"></div><br><br><table style="width: 700px; height:220px;" cellpadding="2"><tbody><tr><td><h4 style="font-style:italic; font-size:28px;">Sorry!<br></h4><h4 style="font-style:italic; font-size:20px;">We are currently receiving only one single per band.<br></h4><h4 style="font-style:italic; font-size:14px;">E-mail us to make arrangements if another band has uploaded using your band name.</h4></td></tr></tbody></table></center></font>';
          }
        }
        else {
          echo '  
        <form name="myForm" action="index.php#slide7" enctype="multipart/form-data" method="post" class="upload-form">
          <center>
            <br><br>
            <table style="width: 500px; height:220px;" cellpadding="2">
              <tbody>
                <tr>
                  <td colspan="2" style="width:100%; height: 40px;"><font size="4" style="text-decoration:underline"><center>Here\'s how to get started<br></center></font></td>
                </tr>
                <tr>
                  <td style="width:60%">E-mail address:</td> <td><input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" class="ss-item-required" name="email" size="30" required></td>
                </tr>
                <tr>
                  <td>Band Name:</td> <td><input type="text" class="ss-item-required" name="band" size="30" required></td>
                </tr>
                <tr>
                  <td>Song Name:</td> <td><input type="text" class="ss-item-required" name="song" size="30" required></td>
                </tr>
                <tr>
                  <td>Select a MP3 file for upload (15mb max):</td><td><input class="upload-file" data-max-size="15728640" type="file" id="fUpload" name="datafile" size="40" accept=".mp3" onchange="checkextension()" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px;" required></td>
                </tr>
                <tr>
                  <td>Check the box to be included in future testing</td><td><input type="checkbox" name="testing" value="Yes"></td>
                </tr>
                <tr>
                  <td align="center">
                   <input type="hidden" name="submitted" value="true">
                  </td>
                  <td>
                    <div><input style="visibility:visible;" type="submit" value="Send" id="i_submit" onclick="formcheck();"></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </form>
        <div style="position: absolute; left: 579px; bottom: 57px">
          <div style="position: relative; left: 12px;" class="fb-like" data-href="https://www.facebook.com/ourindustry.net" data-layout="button" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div><br>
          <div style="position: relative; bottom: -7px">Like/Share Our Facebook Page</div>
        </div>
      </font>';}?>
      <div id="reel" style="visibility:hidden;"></div>
      <div id="patience" style="visibility:hidden;"><h4 style="font-style:italic; font-size:20px;">... UPLOADING ...</h4><br><h4 style="font-style:italic; font-size:14px;">Please be patient</h4></div>

JS

<script>
            $(document).ready(function() {
                $('a[href*=#]').each(function() {
                    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname && this.hash.replace(/#/,'') ) {
                        var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
                        var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
                        if ($target) {
                            var targetOffset = $target.offset().top;
                            $(this).click(function() {
                                $("#nav li a").removeClass("active");
                                $(this).addClass('active');
                                $('html, body').animate({scrollTop: targetOffset}, 600);
                                return false;
                            });
                        }
                    }
                });
            });

      function checkextension() {
        var file = document.querySelector("#fUpload");
        if ( /\.(mp3)$/i.test(file.files[0].name) === false ) { 
          alert("Sorry, this is not an mp3 file.\nTry again."); 
          document.getElementById("fUpload").value = "";
        }
      }

      $(function(){
        var fileInput = $('.upload-file');
        var maxSize = fileInput.data('max-size');
        $('.upload-form').submit(function(e) {
          if(fileInput.get(0).files.length) {
            var fileSize = fileInput.get(0).files[0].size; // in bytes
            if(fileSize>maxSize) {
              alert('File size is more then ' + maxSize + ' bytes.\nPlease upload a smaller mp3.');
              return false;
            }
          } 
        });
      });

      function formcheck() {
        var fileInput = $('.upload-file');
        var maxSize = fileInput.data('max-size');
        var pass = true;
        var emailFilter = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$/;
        var email = document.forms["myForm"]["email"].value;
        if (!emailFilter.test(email)) { pass = false; }
        if (document.forms["myForm"]["email"].value == "") { pass = false; }
        if (document.forms["myForm"]["band"].value == "") { pass = false; }
        if (document.forms["myForm"]["song"].value == "") { pass = false; }
        if (document.forms["myForm"]["datafile"].value == "") { pass = false; }
        if (fileInput.get(0).files.length) {
          var fileSize = fileInput.get(0).files[0].size; // in bytes
          if(fileSize>maxSize) { pass = false; }
        }
        if (pass == true) {

          document.getElementById('i_submit').style.visibility='hidden';
          document.getElementById('reel').style.visibility='visible';
          document.getElementById('patience').style.visibility='visible';
          console.log(document.getElementById('i_submit'));
        }
      }


</script>

Answer 1

我刚刚在 Safari 中尝试了这个，它似乎有效。也许在他们开始工作之前简化事情？

function formcheck() {
  var pass = true;
  if (pass == true) {
    document.getElementById('i_submit').style.visibility = 'hidden';
    document.getElementById('patience').style.visibility = 'visible';
  }
}

<div>
  <input style="visibility:visible;" type="submit" value="Send" id="i_submit" onclick="formcheck();">
</div>
<div id="patience" style="visibility:hidden;">
  <h4 style="font-style:italic; font-size:20px;">
    ... UPLOADING ...
  </h4><br>
  <h4 style="font-style:italic; font-size:14px;">
    Please be patient
  </h4>
</div>