JavaScript でファイルをアップロードする方法(例付き)

Muhammad Muzammil Hussain 2023年10月12日
  1. HTML で JavaScript を使用してファイルをアップロードする例
  2. JavaScript を使用してファイルをアップロード/選択する別の方法
JavaScript でファイルをアップロードする方法(例付き)

この記事では、ファイルピッカーダイアログからファイルを選択し、fetch メソッドを使用して選択したファイルをサーバーにアップロードする方法について説明します。バックエンドサーバーストレージにファイルをアップロードするには、選択したファイルデータをフォームデータオブジェクトに追加する必要があります。

let formData = new FormData();
formData.append('file', fileupload.files[0]);

HTML で JavaScript を使用してファイルをアップロードする例

ファイルタイプの入力フォームを作成して、PC /システムストレージから任意の拡張子のファイルを選択します。関数 uploadFile() を呼び出すためのボタンがあります。この関数は、ファイルデータをフォームデータオブジェクトに追加し、fetch メソッドを使用してそのフォームデータをサーバーにアップロードするだけです。fetch メソッドは、フロントエンドからバックエンドにデータを取得またはアップロードするための API 呼び出しとして、ネットワークリクエストの JavaScript で使用されます。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | File upload example
    </title>
    <script type="text/javascript">
    </script>
</head>
 
 <body>
 <h2>Hi Users Choose your file and Click upload.</h2>
  <!-- Input Form Elements HTML 5 -->
  <input id="fileupload" type="file" name="fileupload" /> 
  <button id="upload-button" onclick="uploadFile()"> Upload file </button>

  <!-- File Upload Logic JavaScript -->
  <script>
  async function uploadFile() {
      //creating form data object and append file into that form data
  let formData = new FormData(); 
  formData.append("file", fileupload.files[0]);
      //network request using POST method of fetch
  await fetch('PASTE_YOUR_URL_HERE', {
    method: "POST", 
    body: formData
  }); 
  alert('You have successfully upload the file!');
  }
  </script>

 </body> 
<html>

上記の HTML ページのソースでは、choose file をクリックしてユーザーのローカルシステムストレージからファイルデータを取得するための file の単純な入力フォームタイプを確認できます。また、Upload file ボタンを使用して関数を宣言し、機能を続行します。

このフロントエンド Web ページでは、選択したファイルの拡張子が付いた名前も表示されます。

ここでは、doctype html で javaScript ステートメントを使用するために必要な <script> タグを確認できます。これらのタグでは、uploadFile() を宣言しています。

この関数にはフォームデータオブジェクトが含まれており、ファイルはそのフォームデータオブジェクトに追加され、fetch POST メソッドを使用してネットワークリクエストを呼び出します。ファイルデータは、ネットワークリクエストの形式で送信されます。

次のステップで、function() はユーザーにアラートボックスを表示します You have successfully upload the file!ファイルが正常にアップロードされた場合。

JavaScript を使用してファイルをアップロード/選択する別の方法

以下に示すのと同じ結果を達成することもできます。document.createElement() メソッドを使用して、type="file"<input> 要素を作成できます。

getElementById() メソッドを使用すると、type="file"<input> 要素に簡単にアクセスできます。

var data = document.getElementById('my_file');
<button onclick="myFunction()">Choose file</button>

<script>
function myTestFunction() {
  var data = document.createElement("INPUT");
  data.setAttribute("type", "file");
  document.body.appendChild(data);
}
</script>

上記の例では、document.createElement("INPUT"); が割り当てられた var data 関数、ファイルタイプでデータの属性を設定する必要があります

次のステップでは、document.body のデータを使用して appendChild する必要があります。

関連記事 - JavaScript Upload