javascript - pathInfo() 在收到附加到 FormData 的 blob 时表现得很奇怪

Question

我有点困惑，这是预期的行为吗？

Javascript - 示例 01

    function convertCanvasToImage() {
                    var temp_ctx, temp_canvas;
                    temp_canvas = document.createElement('canvas');
                    temp_ctx = temp_canvas.getContext('2d');
                    temp_canvas.width = windowWidth;
                    temp_canvas.height = windowWidth;
                    temp_ctx.drawImage(ctx.canvas, cutoutWidth, cutoutWidth, windowWidth, windowWidth, 0, 0, windowWidth, windowWidth);

                    var multiPart = new FormData();
                    temp_canvas.toBlob(function (blob) {

                        //Tilføjer blob til form objektet
                        multiPart.append('pernille', blob, ".jpg");

                        //Ajax kaldet
                        var http = new XMLHttpRequest();
                        var url = "ajax.php";
                        http.open("POST", url, true);
                        http.onreadystatechange = function () {
                            if (http.readyState === 4 && http.status === 200) {
                                alert(this.responseText);
                                console.log(this.responseText);
                            }
                        };
                        http.send(multiPart);
                    }, "image/jpeg");
                }

Javascript - 示例 02

        function convertCanvasToImage() {
            var temp_ctx, temp_canvas;
            temp_canvas = document.createElement('canvas');
            temp_ctx = temp_canvas.getContext('2d');
            temp_canvas.width = windowWidth;
            temp_canvas.height = windowWidth;
            temp_ctx.drawImage(ctx.canvas, cutoutWidth, cutoutWidth, windowWidth, windowWidth, 0, 0, windowWidth, windowWidth);

            var multiPart = new FormData();
            temp_canvas.toBlob(function (blob) {

                //Tilføjer blob til form objektet
                multiPart.append('pernille', blob, "pernille");

                //Ajax kaldet
                var http = new XMLHttpRequest();
                var url = "ajax.php";
                http.open("POST", url, true);
                http.onreadystatechange = function () {
                    if (http.readyState === 4 && http.status === 200) {
                        alert(this.responseText);
                        console.log(this.responseText);
                    }
                };
                http.send(multiPart);
            }, "image/jpeg");
        }

Ajax

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            $file = current($_FILES);
            $nameparts = pathinfo($file['name']);

            echo "<pre>";
            echo '$_POST';
            print_r($_POST);
            echo '$_FILES';
            print_r($file);
            echo 'pathinfo';
            print_r($nameparts);
            echo "</pre>";
    }

两个javascript函数的区别就是这两行

函数 01

    multiPart.append('pernille', blob, ".jpeg");

功能02

    multiPart.append('pernille', blob, "pernille");

Javascript 示例 01 将从 AJAX 调用中输出此内容没有文件名？

    <pre>$_POSTArray
    (
    )
    $_FILESArray
    (
        [name] => .jpg
        [type] => image/jpeg
        [tmp_name] => /home/xch07.wi2/tmp/phpZ6zxv2
        [error] => 0
        [size] => 17713
    )
    pathinfoArray
    (
        [dirname] => .
        [basename] => .jpg
        [extension] => jpg
        [filename] => 
    )
    </pre>

Javascript 示例 02 将从 AJAX 调用中输出有文件名但没有扩展名？

<pre>$_POSTArray
(
)
$_FILESArray
(
    [name] => pernille
    [type] => image/jpeg
    [tmp_name] => /home/xch07.wi2/tmp/phpaKQwU4
    [error] => 0
    [size] => 17601
)
pathinfoArray
(
    [dirname] => .
    [basename] => pernille
    [filename] => pernille
)
</pre>

Answer 1

这并不奇怪，而是您正在使用 FormData.append() 方法不正确。

正确的形式应该是:

multiPart.append('pernille',   blob,   'pernille.jpeg');
                     ^           ^            ^
                 field-name  data-value   file-name

您需要将文件扩展名附加到文件名本身。

引用here了解更多。