web-dev-qa-db-ja.com

jQueryを使用してアップロードフォームからファイル名を取得する方法は？

JQueryを使用してアップロードされたファイルのファイル名を取得したい。しかし、問題は、ファイル名だけではなく、偽のパスとファイル名を取得したことです。これが私のフォームです。

<form action="" method="post">
   <input type="file" name="uploadFile" id="uploadFile" /> 
   <input type="submit" name="submit" value="Upload" id="inputSubmit" />
</form>

そしてjQueryはこのようなものです

$(document).ready(function(){
    $('#inputSubmit').click(function(){
      alert($('#uploadFile').val());
    });
});

Chromeを使用して、これをアラートボックスに表示します。filename.jpgという名前のファイルを選択したとします。

C:\fakepath\filename.jpg

ファイル名のみを取得するにはどうすればよいですか？ご協力ありがとうございました。

jqueryuploadfilenames
11
Abaij

ファイルパス文字列を「\」で分割し、結果の配列の最後の項目を使用します。

参照： 分割文字列配列の最後の要素を取得する

7
Nathan Hase

次のこともできます。

$('#uploadFile').prop("files")['name'];

複数ファイル入力の場合は、次のようにします。

$.each($('#uploadFile').prop("files"), function(k,v){
    var filename = v['name'];

    // filename = "blahblah.jpg", without path
});
4
Mike Mackintosh

jqueryを使用してアップロードするときにファイル名を取得します

var filename = $('input[type=file]').val().split('\').pop();

2
ujjal