web-dev-qa-db-ja.com

パスなしでファイル入力の選択されたファイル名を取得するためにjQueryを使う

私はこれを使った：

$('input[type=file]').val()

選択されたファイル名を取得しますが、 "C：\ fakepath\filename.doc"のようにフルパスを返しました。 "偽パス"の部分は実際にそこにありました - それがあるべきであるかどうかわからない、しかしこれは私がファイルアップロードのファイル名を扱うのは初めてです。

ファイル名（filename.doc）だけを取得するにはどうすればよいですか？

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

それともあなたがすることができます（それは常にセキュリティ上の理由から追加されているC:\fakepathです）：

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')
272
manji

以下のコードを実行するだけです。最初の[0]はHTML要素へのアクセス、2番目の[0]はファイルアップロードの最初のファイルへのアクセスです（ファイルがない場合の検証を含めました）。

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";
67
Diego Cotini

セキュリティ上の理由から、ChromeはC:\fakepath\...を返します - Webサイトは、コンピューター上のファイルへのパスなど、コンピューターに関する情報を取得できないようにする必要があります。

文字列のファイル名部分だけを取得するには、 split() ...を使用できます。

var file = path.split('\\').pop();

jsFiddle 。

...または 正規表現 ...

var file = path.match(/\\([^\\]+)$/)[1];

jsFiddle 。

...または lastIndexOf() ...

var file = path.substr(path.lastIndexOf('\\') + 1);

jsFiddle 。

23
alex

すべてのOSでパスワークを取得

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');

例

C:\fakepath\filename.doc 
/var/fakepath/filename.doc

どちらも戻る

filename.doc
filename.doc
17
Kotzilla

これが私のやり方です、それはかなりうまくいきます。

あなたのHTMLでは、

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

その後、あなたのjsファイルに簡単な関数を作成します。

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

複数のファイルを作成している場合は、これをループしてリストを取得することもできます。

e.target.files[0].name
13
bartlss

偽パスを回避するための多少の追加：

var fileName = $('input[type=file]').val();
var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
alert('clean file name : '+ fileName);
8
vafrcor

このようなものはどうですか？

var pathArray = $('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length - 1]);
5
Bertrand Marron

それは冗談である必要がありますか？あるいは、JavaScriptのネイティブなyourpath.split("\\")を使って文字列を配列に分割することはできますか？

4
GolezTrol

コントロールから最初のファイルを取得してファイル名を取得すると、Chrome上のファイルパスは無視され、IEブラウザのパスも修正されます。ファイルを保存する際には、IEブラウザ専用のファイル名を取得するためにSystem.io.Path.GetFileNameメソッドを使用する必要があります。

var fileUpload    = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); 
var files         =  fileUpload.files; 
var mediafilename = ""; 

for (var i = 0; i < files.length; i++) { 
  mediafilename = files[i].name; 
}
3
Azhar Shahazad
<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val().replace(/.*(\/|\\)/, '')); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val().replace(/.*(\/|\\)/, '');
        // .. do your magic

        $('#filename').html(filename);
    });
</script>
2
real vishal
var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);
1
Mehul Rojasara

この代替手段が最も適切と思われます。

$('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        alert('The file "' + fileName +  '" has been selected.');
});
0
Fischer Tirado