Wie erhalte ich den vollständigen Pfad der ausgewählten Datei beim Ändern von <input type = 'file'> mit Javascript, jquery-ajax?

240

So erhalten Sie den vollständigen Dateipfad bei der Auswahl der Datei mit <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

Die only nameDatei filePath var enthält jedoch die ausgewählte Datei, nicht die full path.
Ich habe es im Internet gesucht, aber es scheint, dass Browser (FF, Chrome) aus Sicherheitsgründen nur den Namen der Datei angeben.
Gibt es eine andere Möglichkeit, den vollständigen Pfad der ausgewählten Datei abzurufen?

Yogesh Pingle
quelle
@nauphal danke für den Kommentar, aber gibt es eine andere Möglichkeit, den vollständigen Pfad der ausgewählten Datei zu erhalten?
Yogesh Pingle
1
Wenn Sie den Pfad einer Datei auf dem Server abrufen möchten (z. B. Erstellen einer Webschnittstelle zu einem Befehlszeilenprogramm, das auf dem Server ausgeführt werden soll), können Sie den relativen Pfad jederzeit erstellen und übersenden als <Option> s und verwenden Sie ein Baum-Widget oder geben Sie voraus, damit der Benutzer es auswählen und der Server die Datei dann verarbeiten kann.
Dardenfall

Antworten:

164

Aus Sicherheitsgründen lassen Browser dies nicht zu, dh JavaScript im Browser hat keinen Zugriff auf das Dateisystem. Bei Verwendung der HTML5-Datei-API stellt jedoch nur Firefox eine mozFullPathEigenschaft bereit. Wenn Sie jedoch versuchen, den Wert abzurufen, wird eine leere Zeichenfolge zurückgegeben:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

Verschwenden Sie also keine Zeit.

Bearbeiten: Wenn Sie den Dateipfad zum Lesen einer Datei benötigen, können Sie stattdessen die FileReader- API verwenden. Hier ist eine verwandte Frage zu SO: Vorschau eines Bildes, bevor es hochgeladen wird.

nicht definiert
quelle
1
Siehe diesen Link, da er mir bei demselben Problem geholfen hat.
Amir Tugi
... Der Titel der verknüpften Frage lautet: Vorschau eines Bildes vor dem Hochladen .
undefiniert
Und doch bekam ich die URL für den Pfad, der an den Server gesendet werden sollte
Amir Tugi
1
@AmirTugi Diese Lösung liest eine Datei. Es hat nichts mit dem Pfad der Datei im Dateisystem des Benutzers zu tun.
undefiniert
Wie könnte diese Website das tun?
SaidbakR
102

Versuche dies:

Sie erhalten einen temporären Pfad, der nicht den genauen Pfad enthält. Sie können dieses Skript verwenden, wenn Sie ausgewählte Bilder wie in diesem jsfiddle-Beispiel anzeigen möchten (versuchen Sie es, indem Sie Bilder sowie andere Dateien auswählen): -

JSFIDDLE

Hier ist der Code: -

HTML: -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

JS: -

$('#i_file').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

Es ist nicht genau das, wonach Sie gesucht haben, aber vielleicht kann es Ihnen irgendwo helfen.

DWX
quelle
Gibt es eine Möglichkeit, dies mit anderen Dateitypen zu tun: pdf, docx usw. und anstelle des Bildes ein Symbol anzuzeigen? Für meine Zwecke möchte ich die Dateien auf der Seite speichern, bevor ich sie sende, damit der Benutzer die Möglichkeit hat, einen Kommentar hinzuzufügen, um ihn wie eine Nachricht mit einem Text hochzuladen.
user1040975
Muss ich nur den Inhalt von "tmppath" in die Adressleiste des Browsers einfügen? Ich habe es versucht und es funktioniert nicht.
MacGruber
@GangsarSwaPurba Leider funktioniert es in IE9 nicht - siehe URL.createObjectURL () .
NaXa
@naXa gut, ich werde meinen Kommentar oben bearbeiten. uw, leider kann ich meinen Kommentar nicht bearbeiten
Gangsar Swapurba
2
In der 3. Zeile sollten Sie die Variable tmppath anstelle von URL.createObjectURL (event.target.files [0]) verwenden. Dies ist optimierter.
Wessam El Mahdy
17

Sie können dies nicht tun - der Browser lässt dies aus Sicherheitsgründen nicht zu.

Wenn eine Datei mithilfe des Objekts input type = file ausgewählt wird, hängt der Wert der value-Eigenschaft vom Wert der Sicherheitseinstellung "Lokalen Verzeichnispfad beim Hochladen von Dateien auf einen Server einschließen" für die Sicherheitszone ab, die zum Anzeigen der Webseite verwendet wird mit dem Eingabeobjekt.

Der vollständig qualifizierte Dateiname der ausgewählten Datei wird nur zurückgegeben, wenn diese Einstellung aktiviert ist. Wenn die Einstellung deaktiviert ist, ersetzt Internet Explorer 8 das lokale Laufwerk und den Verzeichnispfad durch die Zeichenfolge C: \ fakepath \, um eine unangemessene Offenlegung von Informationen zu verhindern.

Und andere

Sie haben );dies am Ende der Änderungsereignisfunktion verpasst .

Erstellen Sie auch keine Funktion für Änderungsereignisse, sondern verwenden Sie sie wie folgt:

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>
Dipesh Parmar
quelle
19
Versuchte Ihren Code, aber es gibt mir einen falschen Weg. Meine Datei ist im DVerzeichnis, aber der Wert kommtC:\fakepath\test.xls
Rahul Munjal
3
C: \ fakepath \ fileName.xls ... weiß jemand, wie man das löst?
André Dos Santos
14

Das kannst du nicht. Die Sicherheit hindert Sie daran, etwas über das Ablagesystem des Client-Computers zu wissen - möglicherweise hat es nicht einmal eines! Es kann sich um einen MAC, einen PC, ein Tablet oder einen internetfähigen Kühlschrank handeln - Sie wissen es nicht, können es nicht wissen und werden es nicht wissen. Wenn Sie den vollständigen Pfad haben, erhalten Sie möglicherweise Informationen zum Client - insbesondere, wenn es sich beispielsweise um ein Netzwerklaufwerk handelt.

Tatsächlich können Sie es unter bestimmten Bedingungen erhalten, es erfordert jedoch ein ActiveX-Steuerelement und funktioniert unter 99,99% der Umstände nicht.

Sie können es ohnehin nicht verwenden, um die Datei am ursprünglichen Speicherort wiederherzustellen (da Sie absolut keine Kontrolle darüber haben, wo Downloads gespeichert werden oder selbst wenn sie gespeichert werden), sodass es in der Praxis für Sie ohnehin nicht sehr nützlich ist.

Rajshekar Reddy
quelle
11

Meinten Sie das?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});
Aytac Gul
quelle
4
Dies gibt keinen Pfad zur Datei. Warum so oft upvoted?
FlowUI. SimpleUITesting.com
7

Sie können den folgenden Code verwenden, um eine funktionierende lokale URL für die hochgeladene Datei abzurufen:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>
Steffen Brem
quelle
4

Ein interessanter Hinweis: Obwohl dies im Web nicht verfügbar ist, können Sie dies tun, wenn Sie JS in Electron verwenden.

Bei Verwendung der Standard-HTML5-Dateieingabe erhalten Sie eine zusätzliche pathEigenschaft für ausgewählte Dateien, die den tatsächlichen Dateipfad enthält.

Vollständige Dokumente hier: https://github.com/electron/electron/blob/master/docs/api/file-object.md

Tim Perry
quelle
1

Sie können, wenn das Hochladen eines gesamten Ordners eine Option für Sie ist

<input type="file" webkitdirectory directory multiple/>

Änderungsereignis enthält:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"
phil294
quelle
1

Sie sollten dies niemals tun ... und ich denke, es ist nutzlos, es in den neuesten Browsern zu versuchen (soweit ich weiß) ... alle neuesten Browser hingegen werden dies nicht zulassen ...

Einige andere Links, die Sie durchgehen können, um eine Problemumgehung zu finden, z. B. das Abrufen des Werts auf der Serverseite, jedoch nicht auf der Clientseite (Javascript).

Vollständiger Pfad von der Dateieingabe mit jQuery
So erhalten Sie den Dateipfad vom HTML-Eingabeformular in Firefox 3

Bipen
quelle
-1

Das Dateielement hat und der Array-Aufruf filesenthält alle notwendigen Dinge, die Sie benötigen

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);
Jeeva Kumar
quelle
2
Es wird nicht der vollständige Pfad der hochgeladenen Datei angegeben.
Sergiu Mare
-3

Sie können den vollständigen Pfad der ausgewählten Datei nur von IE11 und MS Edge hochladen.

var fullPath = Request.Form.Files["myFile"].FileName;
Libertad
quelle