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

152

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?

marky
quelle
11
Der Browser ändert den tatsächlichen Pfad zu, C:\fakepath\ sodass böswillige Websites kein Javascript verwenden können, um Informationen über die Verzeichnisstruktur Ihres Computers zu erhalten.
Plackerei

Antworten:

293
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, '')
Manji
quelle
1
Genau das, was ich brauchte, Manji! Ich muss auch die Erweiterung überprüfen, also habe ich Ihr Beispiel folgendermaßen verwendet: var extension = filename.split ('.'). Pop (); um das auch zu bekommen! Vielen Dank!
Marky
Ist es Fakepathmit einem Großbuchstaben F?
Alex
16
@ MikeDeSimone Ich habe split ('\\') getestet. Pop (); Unter Win 7, Ubuntu 11.04 und Mac OS X funktioniert es auf allen.
Alex
3
@ Alex: Wow, das ist ziemlich verrückt. Es ist also wirklich nur eine Problemumgehung für den schlechten JS-Code von jemandem von früher, der niemals behoben werden kann. Ich führe Safari auf einem Mac aus und sehe dort "C: \ fakepath \". (Spielen Sie damit in jsfiddle .)
Mike DeSimone
1
@ VítorBaptista Windows-Dateien dürfen keine Backslashes in ihren Namen haben. Es ist unter MacOS möglich, obwohl "Sie sollten vermeiden, Doppelpunkte und Schrägstriche in den Namen von Dateien und Ordnern zu verwenden, da einige Betriebssysteme und Laufwerksformate diese Zeichen als Verzeichnistrennzeichen verwenden", wie auf der Apple-Website beschrieben
joao.arruda
68

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 : "";
Diego Cotini
quelle
1
Wenn Sie diese Option verwenden, sollten Sie Folgendes berücksichtigen: Wenn Sie erneut auf die Schaltfläche "Datei auswählen" klicken, um das geöffnete Dateifenster aufzurufen, und dann auf die Schaltfläche "Escape" klicken, wird ein Konsolenfehler ausgegeben.
luke_mclachlan
Ja, Sie haben Recht, aber die Absicht war, nur den Code zu verwenden, um den Namen zu erhalten, da der Code den Namen von einer fest codierten Position erhält, müsste überprüft werden, ob eine Datei vorhanden ist (in diesem Fall handelt es sich um eine Datei) nur eine Datei, könnte aber mehr haben und der Code müsste von allen Elementen durchlaufen werden). Aber sicher, ich werde den Code aktualisieren und diese Validierung einschließen.
Diego Cotini
23

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 .

Alex
quelle
21

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
Kotzilla
quelle
Der Beispielcode var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');verwendet jQuery.
Zarepheth
13

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
bartlss
quelle
Da die Feld-ID in diesem Zusammenhang nichts bewirkt, sollte die Funktion in JS 1 Parameter weniger haben, nur e anstelle von fileSelect (id, e), nur fileSelect (e). Danke aber für die Lösung :).
Jasper Lankhorst
8

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);
vafrcor
quelle
5

Wie wäre es mit so etwas?

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

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

GolezTrol
quelle
3

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; 
} 
Azhar Shahazad
quelle
2
<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>
echtes vishal
quelle
1
var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);
Mehul Rojasara
quelle
1

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.');
});
Fischer Tirado
quelle
0

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>
Debendra Dash
quelle
0

Wir können es auch mit entfernen match

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