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

Question

Jak uzyskać pełną ścieżkę pliku, wybierając plik, używając <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 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?

Answer 1

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.

Answer 2

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> 

Answer 3

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

Answer 4

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.

Answer 5

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ś.

Answer 6

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

Answer 7

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> 

Answer 8

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" 

Answer 9

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