Jquery+Ajaxによるファイルアップロード処理（Illegal invocationエラー）

Question

###前提・実現したいこと
JQueryでファイルアップロード機能を実装中に、以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ
Uncaught TypeError: Illegal invocation

###該当のソースコード

function funcSetFileEdit(docFile){
	if(docFile!=""){
		var file  = $('#juchu_upload_file').prop('files')[0];
		var file_category = $('#file_category').val();
		
		$.ajax({
			type: 'POST',
			url: '/system/juchu/ajax_juchuFileUpload',
			data: {
				'file': file,
				'file_category': file_category,
			},
			async: true,
			dataType: 'json'
		}).done(function(res, status, xhr) {
			alert(res);
			alert("ファイルのアップロードを実行しました。");
		}).fail(function(xhr, status, error) {
			alert("データ取得に失敗しました");
			return;
		});
	}
}

###試したこと
fileの部分に問題があるようで、

 'file': file,

上記のファイルプロパティを送信する箇所を、
下記の様にファイルサイズのみ送信する形式に変更するとエラーは出ず、正常に動作します。

 'file': file.size,

上記のエラーを解決してファイルプロパティの全てをそのままプログラム側に送信できるようにするか、
Javascript側からアップロードしたファイルのテンポラリフォルダの情報をプログラム側に送信できるようにしたいと考えておりますので、ご教示いただけないでしょうか？

###補足情報(言語/FW/ツール等のバージョンなど)
JQueryのバージョンは 1.11.1 です。

Answer 1

すみません。自己解決しました。

<input type="file">のファイルをajaxからプログラムに渡すには、new FormDataを利用する必要があるみたいです。
普通にdataに値を記述したり、serialize化して送信するとアップロードしたファイルの情報をプログラム側に送信できませんでした。

function funcSetFileEdit(docFile){
	if(docFile!=""){
		var fd = new FormData($('#form').get(0));
		
		$.ajax({
			type: 'POST',
			url: '/system/juchu/ajax_juchuFileUpload',
			data: fd,
			processData: false,
			contentType: false,
			async: true,
			dataType: 'json'
		}).done(function(res, status, xhr) {
			alert(res);
			alert("ファイルのアップロードを実行しました。");
		}).fail(function(xhr, status, error) {
			alert("データ取得に失敗しました");
			return;
		});
	}
}

類似する内容がありましたので、リンクを添付します。

【<input type="file">の値「ファイル名」「テンポラリファイルの名前」をjQueryで取得するには？】
URL：https://teratail.com/questions/33279

【jQuery.ajax()でファイルをアップロードする方法】
URL：http://www.koikikukan.com/archives/2014/09/30-013333.php