JavaScriptでローカルファイルを見つける方法

デジタル時代の到来は、個人や企業に利便性をもたらしましたが、プライバシーの漏洩やファイルの紛失など、さまざまな問題も引き起こしています。企業の財務諸表や顧客情報などの一部の機密データについては、多くの企業がクラウドに保存せず、ローカルに保存することを選択しています。ローカル ファイルの場所を特定してブラウザでアクセスする必要があります。この記事では、JavaScript を使用してローカル ファイルの場所を特定する方法を紹介します。

まず、次のように <input type="file"> タグを使用して、HTML でファイル入力ボックスを作成します。

<input>

ユーザーが「1 回」を選択したらファイルがある場合は、それをグローバル変数に追加して、後からコード内でアクセスできるようにします。 JavaScript の FileReader オブジェクトを使用して、ファイルを読み取り、ファイルの内容を取得できます。

let selectedFile;

document.getElementById('fileInput').addEventListener('change', (event) => {
  selectedFile = event.target.files[0];
  console.log(selectedFile);
});

ユーザーがファイルを選択すると、change イベントがトリガーされ、選択したファイルの情報にアクセスできるようになります。 event オブジェクトをパラメーターとしてイベント ハンドラーに渡し、ユーザーが選択したすべてのファイルを含む event.target.files 配列にアクセスします。ここでは、ユーザーが選択した最初のファイルのみを選択し、それを selectedFile 変数に割り当てます。最後に、selectedFile オブジェクトをコンソールに出力して、正しいファイルが選択されていることを確認します。

ローカル ファイルを選択してグローバル変数に保存したので、次のタスクは、ファイルが配置されているパスを決定することです。セキュリティ上の懸念により、Web ブラウザではユーザーのローカル ファイル システムのフル パスへのアクセスが許可されていないため、JavaScript でローカル ファイルへのパスを取得することはできないことがよくあります。ただし、File API の URL.createObjectURL() 関数を使用すると、選択したファイルにアクセスできる URL を生成できます。この URL は一意であり、ユーザーがアップロードした他のファイルや URL とは異なり、ファイルを保存したり他の目的に使用したりするための一意の ID として使用できます。

これで、次のコードを使用して、選択したファイルの URL を取得できます:

const fileURL = URL.createObjectURL(selectedFile);

これで、ファイルへのアクセスに使用できる一意の URL が得られましたが、どのように確認すればよいでしょうか。クリップパスにあるファイルはどれですか?実際、JavaScript はユーザーのローカル ファイル システムにアクセスできないため、これは不可能です。 URL.createObjectURL() 関数を使用すると、ブラウザーは選択したファイルにアクセスするための仮想ファイル パスを自動的に作成します。したがって、ファイルの名前、種類、内容はわかっているかもしれませんが、それが存在するフォルダーのパスはわかりません。フォルダー パスにアクセスする必要がある場合は、ユーザーにその情報の提供を求める必要があります。たとえば、ファイルが保存されるときに正しいフォルダーに追加されるように、ファイル名の後にフォルダー パスを続けるようにユーザーに要求できます。

要約すると、JavaScript はユーザーのローカル ファイル システムに直接アクセスできませんが、FileReader オブジェクトと URL.createObjectURL() 関数を使用してファイル システムを読み取ることができます。ユーザー ファイルを選択し、Web アプリケーションでファイルのコンテンツにアクセスするための一意の URL を生成します。フォルダー パスにアクセスする必要がある場合は、ファイル名の後にフォルダー パスを続けるようにユーザーに依頼するなどして、ユーザーからその情報を取得する必要があります。

以上がJavaScriptでローカルファイルを見つける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。