JavaScriptでHTMLページにおける「fakepath」ファイルの表示方法

「fakepath」をHTMLページ上で表示するためには、JavaScriptを使用する必要があります。以下に、シンプルで簡単な方法といくつかのコード例を示します。

方法1: ファイル名のみ表示する方法

<input type="file" id="fileInput">
<p id="fileName"></p>
<script>
  const fileInput = document.getElementById('fileInput');
  const fileName = document.getElementById('fileName');
  fileInput.addEventListener('change', function() {
    const path = fileInput.value;
    const fileNameValue = path.split('\\').pop().split('/').pop(); // ファイル名のみ取得
    fileName.textContent = fileNameValue;
  });
</script>

上記のコードでは、<input type="file">要素とファイル名を表示するための<p>要素があります。JavaScriptのイベントリスナーを使用して、ファイルが選択されたときにファイル名を取得し、<p>要素に表示しています。

方法2: ファイルのパス全体を表示する方法

<input type="file" id="fileInput">
<p id="filePath"></p>
<script>
  const fileInput = document.getElementById('fileInput');
  const filePath = document.getElementById('filePath');
  fileInput.addEventListener('change', function() {
    const path = fileInput.value;
    filePath.textContent = path;
  });
</script>

上記のコードでは、ファイルのパス全体を表示するための<p>要素があります。ファイルが選択されると、JavaScriptによってファイルのパスが取得され、<p>要素に表示されます。

これらのコード例を使用することで、「fakepath」ファイルの表示を実現することができます。必要に応じて、CSSを使用して表示をカスタマイズすることもできます。