295

を使用してファイルを選択しながらファイルのフルパスを取得する方法<input type=‘file’&gt;

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

ただし、filePath varにはonly name、ではなく、選択したファイルが含まれていますfull path。
ネットで検索しましたが、セキュリティ上の理由からブラウザ（FF、chrome）がファイル名を付けているようです。
選択したファイルのフルパスを取得する他の方法はありますか？

そうすることはできません-セキュリティ上の懸念から、ブラウザはこれを許可しません。

input type = fileオブジェクトを使用してファイルを選択した場合、valueプロパティの値は、Webページの表示に使用されるセキュリティゾーンの「サーバーにファイルをアップロードするときにローカルディレクトリパスを含める」セキュリティ設定の値に依存します。入力オブジェクトを含みます。

選択したファイルの完全修飾ファイル名は、この設定が有効になっている場合にのみ返されます。設定が無効になっている場合、Internet Explorer 8は、不適切な情報の開示を防ぐために、ローカルドライブとディレクトリパスを文字列C：\fakepath\に置き換えます。

そして他

);変更イベント関数の最後でこれを見逃しました。

また、変更イベントの関数を作成せず、代わりに以下のように使用してください。

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>
4

13 に答える 13

197

セキュリティ上の理由から、ブラウザはこれを許可していません。つまり、ブラウザのJavaScriptはファイルシステムにアクセスできませんが、HTML5ファイルAPIを使用すると、FirefoxのみmozFullPathがプロパティを提供しますが、値を取得しようとすると空の文字列が返されます。

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

https://jsfiddle.net/SCK5A/

だからあなたの時間を無駄にしないでください。

編集：ファイルを読み取るためにファイルのパスが必要な場合は、代わりにFileReaderAPIを使用できます。SOに関連する質問は次のとおりです。アップロードする前に画像をプレビューします。

于 2013-03-04T12:09:13.360 に答える
115

これを試して：

正確なパスではなく一時的なパスが表示されます。このjsfiddleの例のように選択した画像を表示する場合は、このスクリプトを使用できます（画像や他のファイルを選択して試してください）：-

JSFIDDLE

ここにコードがあります：-

HTML：-

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

JS：-

$('#i_file').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
    
    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

それはあなたが探していたものとは正確には異なりますが、どこかであなたを助けることができるかもしれません。

于 2014-07-18T06:07:47.523 に答える
18

できません。セキュリティは、クライアントコンピュータのファイリングシステムについて何も知らないためにあなたを止めます-それはそれさえ持っていないかもしれません！それは、MAC、PC、タブレット、またはインターネット対応の冷蔵庫である可能性があります-あなたは知らない、知ることができない、そして知らないでしょう。また、フルパスを使用できるようにすると、クライアントに関する情報が得られる可能性があります。特に、たとえばネットワークドライブの場合はそうです。

実際、特定の条件下で取得できますが、ActiveXコントロールが必要であり、99.99％の状況では機能しません。

とにかくファイルを元の場所に復元するためにそれを使用することはできません（ダウンロードが保存される場所を完全に制御できないため、またはそれらが保存されている場合でも）、実際にはそれはとにかくあまり役​​に立ちません。

于 2013-11-22T05:47:41.700 に答える
18

そうすることはできません。セキュリティ上の理由から、ブラウザーはこれを許可しません。

input type=file オブジェクトを使用してファイルを選択した場合、value プロパティの値は、Web ページの表示に使用されるセキュリティ ゾーンの [ファイルをサーバーにアップロードするときにローカル ディレクトリ パスを含める] セキュリティ設定の値によって異なります。入力オブジェクトを含みます。

選択したファイルの完全修飾ファイル名は、この設定が有効になっている場合にのみ返されます。この設定を無効にすると、不適切な情報漏えいを防ぐために、Internet Explorer 8 はローカル ドライブとディレクトリ パスを文字列 C:\fakepath\ に置き換えます。

その他

);変更イベント関数の最後でこれを見逃しました。

また、変更イベントの関数を作成せずに、以下のように使用してください。

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>
于 2013-03-04T12:05:10.187 に答える
12

これですか？

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});
于 2014-11-23T19:10:16.800 に答える
12

次のコードを使用して、アップロードされたファイルの有効なローカルURLを取得できます。

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>
于 2016-03-30T14:26:41.593 に答える
9

1つの興味深い注意：これはWebでは利用できませんが、ElectronでJSを使用している場合は、これを行うことができます。

path標準のHTML5ファイル入力を使用すると、実際のファイルパスを含む、選択したファイルの追加のプロパティを受け取ります。

完全なドキュメントはこちら：https ：//github.com/electron/electron/blob/master/docs/api/file-object.md

于 2019-11-18T14:23:54.733 に答える
2

フォルダ全体をアップロードすることがオプションである場合は、可能です

<input type="file" webkitdirectory directory multiple/>

変更イベントには次のものが含まれます。

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

ただし、絶対パス全体は含まれず、相対パスのみが含まれます。Firefoxでもサポートされています。

于 2017-03-04T09:31:36.300 に答える
1

あなたは決してそうすべきではありません...そして私は最新のブラウザでそれを試すことは役に立たないと思います（私が知っていることから）...一方、すべての最新のブラウザはこれを許可しません...

値をサーバーサイドで取得するなどの回避策を見つけるために通過できる他のいくつかのリンクですが、クライアントサイドでは取得できません（javascript）

jQueryを使用したファイル入力から
のフルパスFirefox3でHTML入力フォームからファイルパスを取得する方法

于 2013-03-04T12:09:07.120 に答える
0

FileReader APIを使用して、img要素のsrcを変更できます。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

于 2021-04-04T08:05:00.840 に答える
-1

file要素にはfiles必要なものがすべて含まれている配列呼び出しがあります

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);
于 2017-12-13T07:56:23.680 に答える
-3

選択したファイルのフルパスを取得して、IE11とMSEdgeでのみアップロードできます。

var fullPath = Request.Form.Files["myFile"].FileName;
于 2019-04-01T11:03:21.500 に答える
-3 
$('input[type=file]').change(function () {
    console.log(this.files[0].path);
});

これは正しい形式です。

于 2021-08-01T13:57:07.823 に答える