【IT技術】formDatas = new FormData(objs)に値が入らないので無理やりやった

time 2018/04/11

Springでファイルアップロードをしようとして、Ajaxでファイルを送りつける仕組みにしております。

普通にFromData使えばいいんじゃね？と思ったのですが

とりあえず以下をご覧ください。

	$("#exuploadform").on('submit',function(event) {
        // 要素規定の動作をキャンセルする
        event.preventDefault();
        var ajaxUrl = "/api/dictcontroller/upload";
        // ファイル種類
        if(window.FormData){
       　　 var objs = $(this)[0];
            var formDatas = new FormData(objs);
            console.log("printformdata");
            for(item of formDatas){
                console.log(item[0], item[1]);
            }
            $.ajax({
                type : "POST",                  // HTTP通信の種類
                url  : ajaxUrl,                 // リクエストを送信する先のURL
                dataType : "text",              // サーバーから返されるデータの型
                data : formDatas,                // サーバーに送信するデータ
                processData : false,
                contentType: false,
            }).done(function(data) {        // Ajax通信が成功した時の処理
                alert("アップロードが完了しました。");
            }).fail(function(XMLHttpRequest, textStatus, errorThrown) { // Ajax通信が失敗した時の処理
                alert("アップロードが失敗しました。");
            });
        }else{
            alert("アップロードに対応できていないブラウザです。");
        }
    });

}

$("#exuploadform").on('submit',function(event) {

// 要素規定の動作をキャンセルする

event.preventDefault();

var ajaxUrl = "/api/dictcontroller/upload";

// ファイル種類

if(window.FormData){

　　 var objs = $(this)[0];

var formDatas = new FormData(objs);

console.log("printformdata");

for(item of formDatas){

console.log(item[0], item[1]);

}

$.ajax({

type : "POST", // HTTP通信の種類

url : ajaxUrl, // リクエストを送信する先のURL

dataType : "text", // サーバーから返されるデータの型

data : formDatas, // サーバーに送信するデータ

processData : false,

contentType: false,

}).done(function(data) { // Ajax通信が成功した時の処理

alert("アップロードが完了しました。");

}).fail(function(XMLHttpRequest, textStatus, errorThrown) { // Ajax通信が失敗した時の処理

alert("アップロードが失敗しました。");

});

}else{

alert("アップロードに対応できていないブラウザです。");

}

});

}

実際にサーバにとんだデータを見てみると、見事にバイナリデータが空っぽです。
上手く生成されません・・・。昨日3時間ぐらい悩んだのですが、結局うまくいかず、FormData動的生成は
あきらめて、以下のようにしました。

修正後

        if(window.FormData){
            var objs = $(this)[0];
            var formDatas = new FormData();
            formDatas.append('upload_file', $('#upload_file')[0].files[0]);
            formDatas.append('file_name', $('#file_name')[0].value);
            $.ajax({