web-dev-qa-db-de.com

Wie erhalte ich den vollständigen Pfad der ausgewählten Datei bei Änderung von <input type = ‘file’> mit Javascript, jquery-ajax?

So erhalten Sie den vollständigen Dateipfad bei der Dateiauswahl 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 filePath-Variable enthält jedoch only name der ausgewählten Datei, nicht den 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?

206
Yogesh Pingle

Aus Sicherheitsgründen erlauben Browser dies nicht, dh JavaScript im Browser hat keinen Zugriff auf das Dateisystem. Mit der HTML5-Datei-API stellt jedoch nur Firefox eine mozFullPath -Eigenschaft zur Verfügung. Wenn Sie jedoch versuchen, den Wert abzurufen, wird ein leerer Wert zurückgegeben Zeichenfolge:

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

http://jsfiddle.net/SCK5A/

Verschwenden Sie also keine Zeit.

edit: Wenn Sie den Pfad der Datei 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.

129
undefined

Versuche dies:

Es gibt Ihnen einen temporären Pfad, nicht den genauen Pfad. Sie können dieses Skript verwenden, wenn Sie ausgewählte Bilder wie in diesem jsfiddle-Beispiel anzeigen möchten (Probieren Sie es aus, indem Sie Bilder und 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.

96
DWX

Dies ist nicht möglich. Der Browser lässt dies aus Sicherheitsgründen nicht zu.

Wenn eine Datei unter Verwendung des Eingabeobjekts 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 einbeziehen" für die Sicherheitszone ab, die zum Anzeigen der Webseite verwendet wird das Eingabeobjekt enthält.

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.

nd andere

Sie haben ); am Ende der Änderungsereignisfunktion verpasst.

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

<script type="text/javascript">

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

</script>
17
Dipesh Parmar

Das kannst du nicht. Die Sicherheit hält Sie davon ab, etwas über das Ablagesystem des Client-Computers zu wissen - es hat möglicherweise nicht einmal eines! Es könnte ein MAC, ein PC, ein Tablet oder ein internetfähiger Kühlschrank sein - Sie wissen es nicht, können es nicht wissen und werden es auch nicht wissen. Wenn Sie den vollständigen Pfad angeben, erhalten Sie möglicherweise Informationen zum Client, insbesondere, wenn es sich beispielsweise um ein Netzlaufwerk handelt.

Tatsächlich können Sie es unter bestimmten Bedingungen erhalten, aber es erfordert ein ActiveX-Steuerelement und wird in 99,99% der Fälle nicht funktionieren.

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 auch wenn sie gespeichert werden), sodass es Ihnen in der Praxis sowieso nicht viel nützt.

13
Rajshekar Reddy

Meinten Sie das?

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

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>
6
Steffen Brem

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

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

das Änderungsereignis enthält:

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

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

einige andere Links, die Sie durchgehen können, um eine Problemumgehung wie das Abrufen des Werts serverseitig zu finden, jedoch nicht clientseitig (Javascript)

Vollständiger Pfad von der Dateieingabe mit jQuery
So rufen Sie den Dateipfad aus dem HTML-Eingabeformular in Firefox 3 ab

1
bipen

dateielement hat und Arrayaufruf files es enthält alle notwendigen Sachen, 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);
0
Jeeva Kumar

Der vollständige Pfad der ausgewählten Datei kann nur von IE11 und MS Edge hochgeladen werden.

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