XMLHttpRequest 上传进度不可计算答案

【问题标题】：XMLHttpRequest upload progress is non-computableXMLHttpRequest 上传进度不可计算
【发布时间】：2017-01-02 13:11:51
【问题描述】：

我正在尝试使用 XMLHttpRequest 上传文件，但我无法让进度回调（下面的 req.upload.onprogress）正常工作。它总是报告 evt.lengthComputable 为假。但是，服务器 php 正确报告了文件属性（参见下面的 log.txt 列表），并且文件正确保存到 files 目录。

回调不知道内容长度吗？如果是这样，javascript 不允许设置它，所以我的后续问题是如何在 js 中设置它...

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

 )

【问题讨论】：

标签： javascript xmlhttprequest async-onprogressupdate

【解决方案1】：

您必须将evt.preventDefault() 添加到您的submit 处理程序。您的 html 脚本会在提交表单后自动重置页面，您需要停止该操作。

【讨论】：