pathInfo（）在接收附加到FormData的blob时表现得很奇怪

Question

I am a bit confused, is this an expected behaviour?

Javascript - Sample 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 - Sample 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>";
    }

The difference of the two javascript functions are these two lines

Func 01

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

Func 02

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

Javascript sample 01 will output this from the AJAX call There is no filename?

    <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 sample 02 will output this from the AJAX call There is a filename but no extension?

<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

It is not acting weird, rather, you are using FormData.append() method incorrectly.

Correct form should be :

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

You need to append the file extension with the filename itself.

Refer here to learn more.