Verwenden Sie jQuery, um den ausgewählten Dateinamen der Dateieingabe ohne Pfad abzurufen

Ich habe das benutzt:

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

um den Dateinamen auszuwählen, gab er jedoch den vollständigen Pfad zurück, wie in "C: \ fakepath \ filename.doc". Der Teil "fakepath" war tatsächlich da - ich bin mir nicht sicher, ob er sein soll, aber ich arbeite zum ersten Mal mit dem Dateinamen von Datei-Uploads.

Wie kann ich nur den Dateinamen (filename.doc) erhalten?

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

oder Sie könnten es einfach tun (weil es C:\fakepathaus Sicherheitsgründen immer hinzugefügt wird):

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

Sie müssen nur den folgenden Code ausführen. Die erste [0] dient zum Zugriff auf das HTML-Element und die zweite [0] zum Zugriff auf die erste Datei des Datei-Uploads (ich habe eine Validierung hinzugefügt, falls keine Datei vorhanden ist):

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

Chrome kehrt C:\fakepath\...aus Sicherheitsgründen zurück. Eine Website sollte keine Informationen über Ihren Computer abrufen können, z. B. den Pfad zu einer Datei auf Ihrem Computer.

Um nur den Dateinamen eines Strings zu erhalten, können Sie split()...

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

jsFiddle .

... oder ein regulärer Ausdruck ...

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

jsFiddle .

... oder lastIndexOf()...

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

jsFiddle .

Holen Sie sich Pfadarbeit mit allen Betriebssystemen

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

Beispiel

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

Beide kehren zurück

filename.doc
filename.doc

Hier ist, wie ich es mache, es funktioniert ziemlich gut.

In Ihrem HTML tun:

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

Erstellen Sie dann in Ihrer js-Datei eine einfache Funktion:

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

Wenn Sie mehrere Dateien erstellen, sollten Sie auch in der Lage sein, die Liste abzurufen, indem Sie Folgendes durchlaufen:

e.target.files[0].name

Vielleicht eine Ergänzung, um Fakepath zu vermeiden:

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

Wie wäre es mit so etwas?

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

Muss es jquery sein? Oder können Sie einfach JavaScript verwenden yourpath.split("\\"), um die Zeichenfolge in ein Array aufzuteilen?

Rufen Sie die erste Datei vom Steuerelement ab und rufen Sie dann den Namen der Datei ab. Der Dateipfad in Chrome wird ignoriert und der Pfad für IE-Browser wird korrigiert. Beim Speichern der Datei müssen Sie die System.io.Path.GetFileNameMethode verwenden, um den Dateinamen nur für IE-Browser abzurufen

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

Diese Alternative scheint am besten geeignet zu sein.

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

Hier können Sie so aufrufen. Dies ist mein Steuerelement für die Eingabedatei

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

Hier ist meine JQuery, die aufgerufen wird, sobald Sie die Datei ausgewählt haben

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

</script>

Wir können es auch mit entfernen match

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