2016-08-26 11 views
0

XMLHttpRequestを使用してファイルをアップロードしようとしていますが、正しく動作するように進捗状況のコールバック(req.upload.onprogress)を取得できません。 evt.lengthComputableは常にfalseであると報告します。しかし、サーバーphpはファイルの属性を正しく報告します(下のlog.txtのリストを参照)。ファイルはfilesディレクトリに正しく保存されます。XMLHttpRequestのアップロードの進行状況が計算不可能です

コールバックはコンテンツの長さを認識していませんか?もしそうなら、私のフォローアップの質問がJSでそれを設定する方法になりますので、Javascriptを、それを設定する許可しない...

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title>Test</title> 
</head> 
<body> 
    <p>Click to select a file</p> 
    <form method="post" action="" id="test_form" role="form" 
     enctype="multipart/form-data"> 
     <input type="file" id="test_file" required><br/><br/> 
     <button type="submit" id="test_button">Upload</button> 
    </form> 

    <script src="js/jquery.js"></script> 
    <script> 
    $(document).ready(function() 
    { 
     $("#test_form").on('submit', function(evt) 
     { 
      var fileElement = $('#test_file'); 
      var formData = new FormData(); 
      formData.append("file", fileElement[0].files[0]); 

      var req = new XMLHttpRequest(); 
      req.open("POST", document.URL); 
      req.upload.onprogress = function (evt) 
      { 
       if (evt.lengthComputable) 
       { 
        console.log("loaded " + evt.loaded + " total " + evt.total); 
       } 
       else 
       { 
        console.log("progress not computable"); 
       } 
      } 
      req.send(formData); 
     }); 
    }); 
    </script> 
</body> 
</html> 

    <?php 
    $log_path = "log.txt"; 
    file_put_contents($log_path, "_FILES:\n" . print_r($_FILES, true) . "\n"); 
    foreach ($_FILES as $key => $file) 
    { 
     $src_path = $file["tmp_name"]; 
     $dst_path = "./files/" . $file["name"]; 
     file_put_contents($log_path, "save $src_path to $dst_path\n", 
      FILE_APPEND); 
     rename($src_path, $dst_path); 
    } 
    ?> 

サーバーレポートこのlog.txtという中:

_FILES: 
Array 
(
    [file] => Array 
     (
      [name] => 10.m4v 
      [type] => video/mp4 
      [tmp_name] => /tmp/phpkooBwd 
      [error] => 0 
      [size] => 3297694 
     ) 

) 

答えて

0

あなたは持っていますsubmitハンドラにevt.preventDefault()を追加してください。あなたのHTMLスクリプトは、フォームを送信した後、それを停止する必要があると自動的にページをリセットします。

関連する問題