JavaScriptでファイルパスを取得する際、fakepathの問題が発生したときの対処方法
ウェブブラウザでは、セキュリティのためJavaScriptはユーザのファイルシステム内のファイルパスを直接参照することができません。要素を用いてファイルアップロードを実現する場合、ファイルの選択はブラウザによって自動的に処理されファイル名がテキストボックスに表示されますが、実際のファイルパスは「偽りのパス(fakepath)」が設定されます。
ファイルへのフルパスにアクセスしようとする代わりに、ファイルオブジェクトの name 属性を使用してファイル名にアクセスすることは一般的な回避策です。たとえば:
var fileInput = document.getElementById('fileInput');
var fileName = fileInput.files[0].name;
console.log(fileName);
こうすることで、アップロードされたファイルのファイル名を取得でき、「fakepath」の問題が発生しません。この方法が取得できるのはファイル名だけで、完全なファイルパスではないことに注意してください。
ファイルをアップロードしてサーバ側でファイルパスを処理する必要がある場合は、ファイルをサーバにアップロードして、データベースに相対パスかファイル識別子を格納する方法などの、他の方法を検討してください。