web-dev-qa-db-ja.com

Javascript、jquery-ajaxを使用して<input type = 'file'>の変更時に選択したファイルのフルパスを取得する方法

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

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

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

javascriptjqueryfile-uploadfilepath
198
Yogesh Pingle

セキュリティ上の理由から、ブラウザはこれを許可していません。つまり、ブラウザ内のJavaScriptはファイルシステムにアクセスできませんが、HTML5 File APIを使用する場合、FirefoxのみがmozFullPathプロパティを提供します。

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

http://jsfiddle.net/SCK5A/ /

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

edit：ファイルを読み込むためにファイルのパスが必要な場合は、代わりに FileReader APIを使用できます。これはSOに関する関連質問です： アップロード前に画像をプレビューします。

123
undefined

これを試して：

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

_ 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>");
});

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

94
DWX

あなたはそうすることはできません - ブラウザはセキュリティ上の問題のためにこれを許可しません。

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

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

そしてその他

Change event関数の最後で);を見逃しています。

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

<script type="text/javascript">

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

</script>
18
Dipesh Parmar

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

実際には、特定の条件下でそれを取得することができますが、それはActiveXコントロールを必要とし、状況の99.99％で動作しません。

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

13
Rajshekar Reddy

あなたはこれを意味しましたか？

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});
12
Aytac Gul

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

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>
6
Steffen Brem

フォルダ全体をアップロードするのがあなたのためのオプションであるならば、あなたはできます

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

変更イベントには以下が含まれます。

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

あなたは絶対にそうするべきではありません...そして私は最新のブラウザでそれを試みることは（私が知っているものから）無用だと思います...一方ですべての最新のブラウザはこれを許しません...

クライアント側ではなく、サーバー側の値を取得するなどの回避策を見つけるために通過できる他のリンク。

jQueryを使ったファイル入力からのフルパス
Firefox 3でHTML入力フォームからファイルパスを取得する方法 /

1
bipen

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);
0
Jeeva Kumar

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

var fullPath = Request.Form.Files["myFile"].FileName;
0
Libertad