htmlグラフィックアップロードはfirefoxでは機能しません

私はグラフィックフォームをアップロードするためにHTMLフォームを作成していましたが、当初考えていたより混乱していました。私が書いたコードはChromium 62.0.3202.94で動作しますが、Firefox 57.0では0％のままで変更されません。なぜ誰かがこれが起こっているかもしれないという考えを持っていますか？ここにコード：htmlグラフィックアップロードはfirefoxでは機能しません

<!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>

出典

2017-11-29 Erikas Raginis

あなたはこれをデバッグするために何をしましたか？ 'uploadProcess'が呼び出されているかどうかを確認する' console.log'文を追加しましたか？あなたは 'evt.lengthComputable'の値を記録しましたか？ – Quentin

だから私はちょうどそれをした、uploadProcessはFirefoxで呼び出されていないようです。クロームでは、すべてのevt.lengthComputable値をtrueにします。 –

@ErikasRaginis FFでは、アップロードは実際に動作しますか - サーバーに送信されるファイルですか？そうでない場合は、 'error'イベントが発生していますか？ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress Ofc - コンソールにあるすべてのJSエラー？ – tiblu

コードには大きな問題が1つあります。デフォルトの送信アクションは防止されていません。 <submit>からonclickハンドラを削除<form>

から不必要な属性を削除

：によって防止

。代わりに<form onsubmitを使用してください。
<form onsubmitハンドラ（uploadFile）はfalseを返します。

それはクローム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>

出典

2017-11-29 16:15:47 tiblu

このコードは進捗状況を示していますが、ファイルをサーバーストレージに実際に置くことはできません。どのアップロード方法を使用していましたか？ –

心配しないで、問題がupload.phpで見つかった –

htmlグラフィックアップロードはfirefoxでは機能しません

答えて

関連する問題