Jak uzyskać pełną ścieżkę wybranego pliku przy zmianie <input type = 'file'> przy użyciu javascript, jquery-ajax?

Jak uzyskać pełną ścieżkę pliku podczas wybierania pliku za pomocą <input type=‘file’>

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

ale plik filePath var zawiera only namewybrany plik, a nie plik full path.
Przeszukałem go w sieci, ale wydaje się, że ze względów bezpieczeństwa przeglądarki (FF, chrome) podają tylko nazwę pliku.
Czy istnieje inny sposób uzyskania pełnej ścieżki wybranego pliku?

Ze względów bezpieczeństwa przeglądarki na to nie zezwalają, tzn. JavaScript w przeglądarce nie ma dostępu do systemu plików, jednak używając API plików HTML5, tylko Firefox zapewnia mozFullPathwłaściwość, ale jeśli spróbujesz uzyskać wartość, zwróci pusty ciąg znaków:

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

http://jsfiddle.net/SCK5A/

Więc nie marnuj czasu.

edycja: Jeśli potrzebujesz ścieżki pliku do odczytu pliku, możesz zamiast tego użyć interfejsu API FileReader . Oto pokrewne pytanie dotyczące SO: Wyświetl podgląd obrazu przed przesłaniem.

Spróbuj tego:

Daje ci tymczasową ścieżkę, która nie jest dokładna, możesz użyć tego skryptu, jeśli chcesz pokazać wybrane obrazy, tak jak w tym przykładzie jsfiddle (spróbuj, wybierając obrazy, a także inne pliki): -

JSFIDDLE

Oto kod: -

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

Nie jest to dokładnie to, czego szukałeś, ale może być gdzieś pomocne.

Nie możesz tego zrobić - przeglądarka nie pozwoli na to ze względów bezpieczeństwa.

Po wybraniu pliku za pomocą obiektu input type = file obiekt wartość właściwości value zależy od wartości ustawienia zabezpieczeń „Uwzględnij ścieżkę katalogu lokalnego podczas przesyłania plików na serwer” dla strefy bezpieczeństwa używanej do wyświetlania strony internetowej zawierający obiekt wejściowy.

Pełna nazwa wybranego pliku jest zwracana tylko wtedy, gdy to ustawienie jest włączone. Gdy ustawienie jest wyłączone, Internet Explorer 8 zastępuje lokalny dysk i ścieżkę katalogu ciągiem C: \ fakepath \, aby zapobiec ujawnieniu niewłaściwych informacji.

I inne

Przegapiłeś );to pod koniec funkcji zmiany zdarzenia.

Nie twórz też funkcji zmiany zdarzenia, po prostu użyj jej jak poniżej,

<script type="text/javascript">

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

</script>

Nie możesz Bezpieczeństwo powstrzymuje Cię od wiedzy na temat systemu archiwizacji komputera klienckiego - może nawet nie mieć! Może to być komputer Mac, PC, tablet lub lodówka z dostępem do Internetu - nie wiesz, nie możesz wiedzieć i nie będziesz wiedzieć. A podanie pełnej ścieżki może dać ci trochę informacji o kliencie - szczególnie jeśli jest to na przykład dysk sieciowy.

W rzeczywistości można go uzyskać w określonych warunkach, ale wymaga kontrolki ActiveX i nie będzie działać w 99,99% przypadków.

Nie możesz go użyć do przywrócenia pliku do pierwotnej lokalizacji (ponieważ nie masz absolutnej kontroli nad tym, gdzie są przechowywane pliki do pobrania, a nawet jeśli są one przechowywane), więc w praktyce i tak nie jest to zbyt użyteczne.

Miałaś na myśli to?

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

Możesz użyć następującego kodu, aby uzyskać działający lokalny adres URL przesłanego pliku:

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

Jedna interesująca uwaga: chociaż nie jest to dostępne w Internecie, jeśli używasz JS w Electronie, możesz to zrobić.

Korzystając ze standardowego pliku wejściowego HTML5, otrzymasz dodatkową pathwłaściwość dla wybranych plików, zawierającą rzeczywistą ścieżkę pliku.

Pełne dokumenty tutaj: https://github.com/electron/electron/blob/master/docs/api/file-object.md

Możesz to zrobić, jeśli przesłanie całego folderu jest dla Ciebie opcją

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

zmiana zdarzenia będzie zawierać:

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

nigdy nie powinieneś tego robić ... i myślę, że wypróbowanie go w najnowszych przeglądarkach jest bezużyteczne (z tego co wiem) ... wszystkie najnowsze przeglądarki z drugiej strony nie pozwolą na to ...

niektóre inne linki, przez które można przejść, aby znaleźć obejście, takie jak pobieranie wartości na serwerach, ale nie po stronie klienta (javascript)

Pełna ścieżka do pliku wejściowego za pomocą jQuery
Jak uzyskać ścieżkę do pliku z formularza wejściowego HTML w Firefox 3

element pliku ma, a wywołanie tablicy fileszawiera wszystkie niezbędne rzeczy, których potrzebujesz

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

Możesz uzyskać pełną ścieżkę wybranego pliku do przesłania tylko przez IE11 i MS Edge.

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