ajaxでの画像アップロードがわかりません

Question

なぜかajaxでtypeがPOSTなのに引数がつくのと、FormDataクラスというのはnew演算子ですぐ使えるのでしょうか？
apiのファイル名だけ変えてあとは丸コピなんですがうまくアップロードできません。

<form id="foo">
    <input id="file" name="file" type="file" />
    <input id="send" type="submit" />
</form>
<div id="result"></div>

$(function(){
    $('#foo').submit(function(){
        $.ajax({
            url: "test.php",
            type: 'POST',
            data: {
                'file': $('#file').val()
            },
            dataType: 'json'
        })
        .done(function( data ) {
            $('#result').text(data.width + "x" + data.height);
        });
        return false;
    });
});

if ($_FILES['file']) {
    $size = getimagesize( $_FILES['file']['tmp_name'] );
    $data = array( 'width' => $size[0],
                   'height' => $size[1] );
    header('Content-type: text/html');
    echo json_encode($data);
}

Answer 1

初めまして。

ajaxですが、以下の様に修正したらどうでしょうか？

$.ajax({
            url: "test.php",
            type: 'POST',
            processData: false, //追加
           contentType: false, //追加
            data: {
                'file': $('#file').val()
            },
            dataType: 'json'
        })
        .done(function( data ) {
            $('#result').text(data.width + "x" + data.height);
        });
        return false;
    });

ajaxでファイルをアップするときは、prosessDataとcontentTypeをfalseにする必要があります。
下記サイトに詳細が記載されてますので、参考になればと思います。
AjaxでFormDataを使ってファイルアップロードする

Comments

[NobumitsuHata]

jQueryのコードこちらでした申し訳ありません。
上記サイト拝見します！ありがとうございます。

$(function(){
$('#foo').submit(function(){
var fd = new FormData($('#foo').get(0));
$.ajax({
url: "test.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
dataType: 'json'
})
.done(function( data ) {
$('#result').text(data.width + "x" + data.height);
});
return false;
});