HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM FileUploadオブジェクトとは？作成方法と主要プロパティを解説

HTML DOM FileUploadオブジェクトとは

HTML DOMのFileUploadオブジェクトは、HTML文書内の <input type="file"> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScriptからファイルアップロード用の入力ボタンを動的に生成したり、その属性や状態を取得・変更したりすることができます。

FileUploadオブジェクトの作成方法

FileUploadオブジェクトを作成するには、document.createElement() メソッドを使用します。

構文

以下が基本的な構文です。

var fileUploadBtn = document.createElement("INPUT");
fileUploadBtn.setAttribute("type", "file");

まず createElement("INPUT") でinput要素を生成し、続いて setAttribute("type", "file") でtype属性に「file」を指定することで、ファイルアップロードボタンとして機能するようになります。

FileUploadオブジェクトの主なプロパティ

HTML DOMのFileUploadオブジェクトには、以下のプロパティが用意されています。

プロパティ説明
acceptファイルアップロードボタンのaccept属性の値を取得・設定します。受け付けるファイルの種類を指定できます。
autofocusページ読み込み時に、ファイルアップロードボタンへ自動的にフォーカスを当てるかどうかを取得・設定します。
disabledファイルアップロードボタンが無効化されているかどうかを取得・設定します。
defaultValueファイルアップロードボタンのデフォルト値を取得・設定します。
filesファイルアップロードボタンで選択されたすべてのファイルを参照するFileListオブジェクトを返します。
formファイルアップロードボタンを囲んでいるform要素への参照を返します。
multipleユーザーが複数のファイルを選択できるかどうかを取得・設定します。
nameファイルアップロードボタンのname属性の値を取得・設定します。
requiredファイルアップロードボタンのrequired属性の値を取得・設定します。フォーム送信時に必須項目として扱われます。
typeファイルアップロードボタンのtype属性の値を取得・設定します。
valueファイルアップロードボタンのvalue属性の内容を取得・設定します。

サンプルコード

以下は、HTML DOMのFileUploadオブジェクトを使用した具体例です。ボタンをクリックすると、ファイルアップロードボタンが動的に生成されます。

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .btn{
      background-color:lightblue;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
      display:block;
   }
</style>
</head>
<body>
<h1>DOM Fileupload Object Example</h1>
<button onclick="createFileBtn()" class="btn">Click me to create an input file upload button</button>
<script>
   function createFileBtn() {
      var fileUploadBtn = document.createElement("INPUT");
      fileUploadBtn.setAttribute("type", "file");
      document.body.appendChild(fileUploadBtn);
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

HTML DOM FileUploadオブジェクトとは？作成方法と主要プロパティを解説

青色のボタンをクリックすると、ファイルアップロードボタンがページに追加されます。

HTML DOM FileUploadオブジェクトとは？作成方法と主要プロパティを解説

このように、FileUploadオブジェクトを使えば、ユーザーの操作に応じてファイル選択ボタンを柔軟に生成・制御することが可能です。フォームの動的な構築や、ファイルアップロード機能のカスタマイズにぜひ活用してみてください。

  1. HTML DOMのInput FileUpload autofocusプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput FileUpload autofocusプロパティは、ページが最初に読み込まれた際に、ファイルアップロード用の入力欄（<input type=file>）へ自動的にフォーカスを当てるかどうかを設定・取得するためのプロパティです。 構文 autofocusプロパティの構文は以下のとおりです。 値を取得する場合（true / false を返す） inputFileUploadObject.autofocus 値を設定する場合 inputFileUploadObject.autofocus = booleanValue 設定できるブール値 booleanV

  2. HTML DOM Input Reset（リセットボタン）オブジェクトの使い方とプロパティ一覧

    HTML DOM の Input Reset オブジェクトは、type 属性に reset が指定された <input> 要素に関連付けられています。リセットボタンとなる入力要素は、新規に作成する場合は createElement() メソッドを、既存の要素にアクセスする場合は getElementById() メソッドを使用することで操作できます。 Input Reset オブジェクトの主なプロパティ Input Reset オブジェクトには、以下のプロパティが用意されています。 プロパティ説明 autofocusページ読み込み時に、リセットボタンへ自動的にフォーカスを当