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

240

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?

Yogesh Pingle
źródło
@nauphal dzięki za komentarz, ale czy jest jakiś inny sposób na uzyskanie pełnej ścieżki do wybranego pliku?
Yogesh Pingle
1
Jeśli jesteś w przypadku, gdy chcesz uzyskać ścieżkę pliku na serwerze (na przykład budowanie interfejsu internetowego do narzędzia wiersza poleceń, które ma być uruchomione na serwerze), zawsze możesz zbudować ścieżkę względną, przesłać ją jako <opcja> i użyj widgetu drzewa lub wpisz naprzód, aby pozwolić użytkownikowi wybrać go, a następnie poprosić serwer o przetworzenie pliku.
dardenfall

Odpowiedzi:

164

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.

nieokreślony
źródło
1
Zobacz ten link, ponieważ pomógł mi z tym samym problemem.
Amir Tugi,
... Tytuł połączonego pytania brzmi: wyświetl podgląd obrazu przed przesłaniem .
niezdefiniowany
A jednak dostałem adres URL ścieżki do wysłania na serwer
Amir Tugi,
1
@AmirTugi To rozwiązanie czyta plik. Nie ma to nic wspólnego ze ścieżką pliku w systemie plików użytkownika.
niezdefiniowany
Jak ta strona może to zrobić?
SaidbakR
102

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.

DWX
źródło
Czy można to zrobić z innymi typami plików: pdf, docx itp., A zamiast obrazu wyświetlać ikonę? Dla moich potrzeb chcę przechowywać pliki na stronie, zanim wyślę je, dając użytkownikowi szansę dodania komentarza, aby załadować go jak wiadomość z tekstem.
user1040975,
Czy muszę tylko umieszczać zawartość „tmppath” w pasku adresu przeglądarki? Próbowałem i to nie działa.
MacGruber,
@GangsarSwaPurba Niestety nie działa w IE9 - patrz URL.createObjectURL () .
naXa
@naXa dobrze, zmodyfikuję mój komentarz powyżej. uw, niestety nie mogę edytować mojego komentarza
Gangsar Swapurba
2
W trzecim wierszu powinieneś użyć zmiennej tmppath zamiast URL.createObjectURL (event.target.files [0]), to jest bardziej zoptymalizowane.
Wessam El Mahdy
17

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>
Dipesh Parmar
źródło
19
Próbowałem twojego kodu, ale podał mi niewłaściwą ścieżkę. mój plik jest w Dkatalogu, ale wartość nadchodziC:\fakepath\test.xls
Rahul Munjal
3
C: \ fakepath \ fileName.xls ... ktoś wie, jak to rozwiązać?
André Dos Santos
14

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.

Rajshekar Reddy
źródło
11

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);       
});
Aytac Gul
źródło
4
nie podaje ścieżki do pliku. Po co głosować tak wiele razy?
FlowUI. SimpleUITesting.com
7

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>
Steffen Brem
źródło
4

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

Tim Perry
źródło
1

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"
phil294
źródło
1

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

bipen
źródło
-1

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);
Jeeva Kumar
źródło
2
Nie zapewnia pełnej ścieżki przesłanego pliku.
Sergiu Mare
-3

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;
Libertad
źródło