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

私はこれを使いました：

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

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

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

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

または、あなたはただ行うことができます（C:\fakepathそれは常にセキュリティ上の理由で追加されるためです）：

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

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

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

Chromeが帰ってきた C:\fakepath\...セキュリティ上の理由でれ -ウェブサイトは、コンピューター上のファイルへのパスなど、コンピューターに関する情報を取得できません。

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

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

jsFiddle。

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

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

jsFiddle。

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

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

jsFiddle。

すべてのOSでパスを取得

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

例

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

どちらも戻る

filename.doc
filename.doc

ここに私がそれをする方法があります、それはかなりうまくいきます。

あなたの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

多分フェイクパスを避けるためのいくつかの追加：

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

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

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

それはjqueryでなければなりませんか？または、JavaScriptのネイティブyourpath.split("\\")を使用して文字列を配列に分割できますか？

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

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; 
} 

<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>

var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);

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

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

ここでは、このように呼び出すことができますこれを私の入力ファイルコントロールにしましょう

  <input type="file" title="search image" id="file" name="file" onchange="show(this)"  />

これが、ファイルを選択すると呼び出されるJqueryです。

<script type="text/javascript">
    function show(input) {
        var fileName = input.files[0].name;
        alert('The file "' + fileName + '" has been selected.');               
            }

</script>

を使用して削除することもできます match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);