Ajaxを使用したドキュメントタイプを含むフォームのアップロード方法

1. FormDataオブジェクトを使用する方法:

   // HTMLフォームのIDを取得
   var form = document.getElementById('yourFormId');
   // FormDataオブジェクトを作成
   var formData = new FormData(form);
   // フォームデータにドキュメントタイプのファイルを追加
   var fileInput = document.getElementById('fileInputId');
   formData.append('document', fileInput.files[0]);
   // Ajaxリクエストを作成
   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'yourUploadUrl', true);
   // レスポンスの処理
   xhr.onload = function() {
   if (xhr.status === 200) {
   // 成功時の処理
   console.log(xhr.responseText);
   } else {
   // エラー時の処理
   console.error(xhr.statusText);
   }
   };
   // リクエストの送信
   xhr.send(formData);

2. jQueryを使用する方法:

   // フォームの送信イベントをキャプチャ
   $('#yourFormId').submit(function(e) {
   e.preventDefault();
   
   // FormDataオブジェクトを作成
   var formData = new FormData(this);
   
   // フォームデータにドキュメントタイプのファイルを追加
   formData.append('document', $('#fileInputId')[0].files[0]);
   
   // Ajaxリクエストを作成
   $.ajax({
   url: 'yourUploadUrl',
   type: 'POST',
   data: formData,
   processData: false,
   contentType: false,
   success: function(response) {
     // 成功時の処理
     console.log(response);
   },
   error: function(xhr, status, error) {
     // エラー時の処理
     console.error(error);
   }
   });
   });

これらの例では、フォームのデータを取得し、FormDataオブジェクトに追加します。ドキュメントタイプのファイルは、フォームデータに追加されます。その後、Ajaxリクエストを使用して、フォームデータをサーバーに送信します。サーバーサイドでは、アップロードされたファイルを処理する必要があります。