2013-03-04 12 views
143

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

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

ale filePath var zawiera only name od wybranego pliku, a nie full path.
Przeszukałem to w sieci, ale wygląda na to, ż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 do wybranego pliku?

+0

http://stackoverflow.com/questions/9463368/getting-file-full-path-when-uploading -file-in-html-in-firefox – Nauphal

+0

[Zobacz szczegóły] (http://stackoverflow.com/questions/3489133/full-path-from-file-input-using-jquery#answer-3489167) –

+0

@ nauphal dziękuje za komentarz, ale czy istnieje inny sposób na uzyskanie pełnej ścieżki wybranego pliku? –

Odpowiedz

89

Ze względów bezpieczeństwa przeglądarek nie pozwalają na to, tj JavaScript w przeglądarce nie ma dostępu do systemu plików, jednak przy użyciu HTML5 File API, tylko Firefox zapewnia właściwość mozFullPath, ale jeśli staramy się ich wartość zwraca pusty ciąg:

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

http://jsfiddle.net/SCK5A/

Więc nie trać czasu.

edytuj: Jeśli potrzebujesz ścieżki pliku do odczytu pliku, możesz użyć interfejsu API FileReader. Oto pokrewne pytanie na temat: Preview an image before it is uploaded.

+0

Zobacz [ten link] (http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded), ponieważ pomógł mi z tym samym problemem. –

+0

... Tytuł połączonego pytania brzmi: [Podgląd obrazu przed jego przesłaniem] (http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded). – undefined

+0

A jednak dostałem adres URL ścieżki do wysłania na serwer –

18

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

Kiedy plik zostanie wybrany za pomocą input type = obiekt pliku, wartość nieruchomości wartość zależy od wartości „Dołącz lokalnej ścieżkę podczas przesyłania plików na serwer” ustawienia zabezpieczeń dla strefa bezpieczeństwa używana do wyświetlania strony internetowej zawierającej wejściowy obiekt .

W pełni kwalifikowana nazwa pliku wybranego pliku jest zwracana tylko , gdy to ustawienie jest włączone. Gdy ustawienie jest wyłączone, Internet Explorer Explorer 8 zastępuje lokalną ścieżkę dysku i katalogu ciągiem C: \ fakepath \, aby zapobiec niewłaściwemu ujawnieniu informacji.

I innych

Przegapiłeś ); to w końcu funkcji zdarzenia change.

również nie tworzyć funkcję zmiany razie zamiast po prostu użyć go jak poniżej,

<script type="text/javascript"> 

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

</script> 
+8

Wypróbowałem twój kod, ale podałem mi niewłaściwą ścieżkę. mój plik znajduje się w katalogu 'D', ale nadchodzi wartość' C: \ fakepath \ test.xls' –

+1

C: \ fakepath \ nazwa_pliku.xls ... każdy wie jak to rozwiązać? –

1

nigdy nie powinno się robić tak .... i myślę, próbując go w najnowszych przeglądarkach jest bezużyteczny (z tego co wiem) .. wszystkie najnowsze przeglądarki z drugiej strony, nie pozwalają na to ...

kilka innych linków, przez które można przejść, aby znaleźć obejście problemu, takie jak uzyskanie wartości serwery wartości, ale nie na kliencie (javascript)

Full path from file input using jQuery
How to get the file path from HTML input form in Firefox 3

8

Nie możesz. Zabezpieczenia uniemożliwiają uzyskanie informacji o systemie plików komputera klienckiego - może nawet go nie mieć! Może to być MAC, komputer, tablet lub lodówka z dostępem do Internetu - nie wiesz, nie możesz wiedzieć i nie będziesz wiedzieć. A przekazanie pełnej ścieżki może dostarczyć 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% okoliczności.

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

74

Spróbuj to:

To da ci tymczasową drogę nie dokładna ścieżka, można użyć tego skryptu, jeśli chcesz pokazać wybrane obrazy jak w tym jsfiddle przykład (spróbuj go dobierali obrazów, jak również 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 dokładnie to, czego szukaliśmy, ale może być to może pomóc gdzieś.

+0

Czy jest sposób na to zrobić z innymi typami plików: pdf, docx, itp. I zamiast obrazu, więc pokaż ikonę? Do moich celów chcę przechowywać pliki na stronie, zanim wyślę je, dając użytkownikowi szansę na dodanie komentarza, aby załadować go jak wiadomość z tekstem. – user1040975

+0

Czy muszę tylko umieścić treść "tmppath" w pasku adresu przeglądarki? Próbowałem i to nie działa. – MacGruber

+0

@GangsarSwaPurba Niestety, nie działa w IE9 - [patrz URL.createObjectURL()] (https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Browser_compatibility). – naXa

9

Czy to masz na myśli?

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

4

można użyć poniższy kod, żeby dostać pracę lokalnego URL przesłanego pliku:

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

Można, jeśli przesłać cały folder jest rozwiązaniem dla Ciebie

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

Zmiana zdarzenia będzie zawierać:

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

elementem plik ma i wezwanie tablica files ona zawierać wszelkie niezbędne rzeczy potrzebne

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