ajax送信による画像アップロードができない

Question

jQueryのsuccessの部分がalertされません。
datatype jsonとすると、successのalertがうまく作動しません。
もちろんアップデートもできておりません。
重要なprocessDataとcontentTypeのfalseはやっているのですが。
APIのバグでしょうか？

<form id="content" action="">
        <input type="file" name="hogeFile">
        <input type="submit" value="send">
</form>

$("#content").on("change", 'input[type="file"]', function(e){
        e.preventDefault();
        var formData = new FormData();
        var files = this.files;
        $.each(files, function(i, file){
            formData.append('file', file);
        });
        $.ajax({
            url: '/api_register.php',
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(data) {
                alert('成功');
                console.log(data.comment);
                alert(data.comment);
            },
            complete: function(data){
                alert('完了');
                console.log(data.comment);
                alert(data.comment);
            }
        });
    });

受け取るAPI

if ($_POST) {
        echo json_encode(array('comment'=>$_FILES["hogeFile"]));
        move_uploaded_file($_FILES["hogeFile"]["tmp_name"], ROOT . "/assets/img/user/" . $_FILES["hogeFile"]["name"]);//画像を保存。
}

Answer 1

自分も同様の現象に遭遇しましたが、formの入れ子が原因でした。
違うかとは思いますが、念のため…

Answer 2

PHPでJSONにエンコードしてるのに、JS側でデコード処理をしてないから起きている問題なのでは。

Answer 3

ふつうにnameが一致してないだけとかじゃないんですかね

 formData.append('file', file);

↓

 formData.append('hogeFile', file);

別にドラッグ＆ドロップでファイルを取得したいとかじゃないなら
普通にnew FormDataにフォームつっこんどきゃいい気もします

<form id="content" action="">
        <input type="file" name="hogeFile">
        <input type="submit" value="send">
</form>

↓

<form id="content" action="" enctype="multipart/form-data">
        <input type="file" name="hogeFile">
        <input type="submit" value="send">
</form>

        var formData = new FormData();
        var files = this.files;
        $.each(files, function(i, file){
            formData.append('file', file);
        });

↓

        var formData = new FormData($(this).parents('form').get(0));

Answer 4

            success: function(data) {
                alert('成功');
                console.log(data.comment);
                alert(data.comment);
            },

こんな書き方してるから、デバッグできないのです。

            success: function(data) {
                alert('成功');
                console.log(data);
                alert(data.comment);
            },

こうすればデバッグしやすいはずです。

Answer 5

PHPですが、$_POSTではなく$_FILESでどうでしょう？
後、念のためですがjqueryのイベントは正常に発火していますか？

if ($_FILES) {
        echo json_encode(array('comment'=>$_FILES["hogeFile"]));
        move_uploaded_file($_FILES["hogeFile"]["tmp_name"], ROOT . "/assets/img/user/" . $_FILES["hogeFile"]["name"]);//画像を保存。
}

Answer 6

mimeType:"multipart/form-data",

を入れると上手くいったりしませんか？

Comments

[NobumitsuHata]

ありがとうございます。

変わらずcompleteのとこの完了の次のalertでundefinedがでます

[Lhankor_Mhy]

$_FILES["hogeFile"] の部分はこのままで大丈夫なんですよね？ PHPでは特にエラーを出していないんですよね？