JavaScript と jQuery を使用して完全なファイル パスを取得するにはどうすればよいですか?

JavaScript と jQuery を使用して選択したファイルのフル パスを取得する

Web 開発では、多くの場合、HTML < を使用してファイルの選択を処理する必要があります。 ;input type="ファイル">要素。 Firefox や Chrome などのブラウザはファイル名へのアクセスを提供しますが、セキュリティ上の理由からフル パスへのアクセスを制限しています。

値属性を使用したアプローチの失敗

よくある誤解の 1 つそれは、<input type="file"> の value 属性です。フルパスが含まれています。ただし、この方法ではファイルの名前のみが返され、フル パスは返されません。

<input type="file">

ブラウザのセキュリティ制限

ブラウザは JavaScript を介したフル パスへのアクセスを意図的に無効にしています。悪意のある攻撃を防ぎ、ユーザーのプライバシーを保護します。基本的に、JavaScript はファイル システムにアクセスできません。

Firefox の代替手段

他のブラウザではフル パスへのアクセスが提供されませんが、Firefox には独自のプロパティがあります。 mozFullPath と呼ばれます。ただし、このプロパティにアクセスしようとすると、空の文字列が返されます。

$('input[type=file]').change(function () {
  console.log(this.files[0].mozFullPath);
});
https://jsfiddle.net/SCK5A/

ファイル読み取りの代替アプローチ

フル パスに依存する代わりに、ファイルの使用を検討してください。 Reader API。システム上のファイルの場所にアクセスせずにファイルの内容を読み取ることができます。このアプローチは、次のスタック オーバーフローの質問で説明されているように、アップロードする前に画像をプレビューするために一般的に使用されます:

アップロードされる前に画像をプレビューします。

以上がJavaScript と jQuery を使用して完全なファイル パスを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。