JavaScriptでファイルのフィールドタイプを取得し、ループ処理する方法


  1. ファイルの選択: ユーザーがアップロードしたファイルを取得するために、HTMLの要素を使用します。この要素には、ファイルを選択するためのUIが表示されます。

  2. ファイル情報の取得: JavaScriptのFileオブジェクトを使用して、選択されたファイルの情報を取得します。以下のようなコードを使用します。

    const fileInput = document.querySelector('input[type="file"]');
    const file = fileInput.files[0];

    上記のコードでは、最初に選択されたファイルの情報を取得しています。

  3. const fieldTypes = file.type.split('/');
    const fileType = fieldTypes[0];
    const fileExtension = fieldTypes[1];
    console.log('File Type:', fileType);
    console.log('File Extension:', fileExtension);
    // フィールドタイプに応じた処理を行う
    if (fileType === 'image') {
     // 画像ファイルの場合の処理
    } else if (fileType === 'video') {
     // 動画ファイルの場合の処理
    } else if (fileType === 'audio') {
     // 音声ファイルの場合の処理
    } else {
     // その他のファイルタイプの場合の処理
    }

    上記のコードでは、ファイルのフィールドタイプをスラッシュ(/)で区切り、fileTypefileExtensionという変数に分割して格納しています。その後、フィールドタイプに応じて適切な処理を行うための条件分岐を行っています。

    これらの手順を組み合わせることで、JavaScriptでファイルのフィールドタイプを取得し、ループ処理することができます。適宜必要な処理を追加してください。