Jak rozwiązać C: \ fakepath?

<input type="file" id="file-id" name="file_name" onchange="theimage();">

To jest mój przycisk przesyłania.

<input type="text" name="file_path" id="file-path">

To pole tekstowe, w którym muszę pokazać pełną ścieżkę do pliku.

function theimage(){
 var filename = document.getElementById('file-id').value;
 document.getElementById('file-path').value = filename;
 alert(filename);
}

To jest JavaScript, który rozwiązuje mój problem. Ale w wartości alarmowej daje mi

C:\fakepath\test.csv 

a Mozilla daje mi:

test.csv

Ale chcę lokalną pełną ścieżkę pliku . Jak rozwiązać ten problem?

Jeśli wynika to z problemów związanych z bezpieczeństwem przeglądarki, jaki powinien być alternatywny sposób?

Niektóre przeglądarki mają funkcję zabezpieczeń, która uniemożliwia JavaScriptowi rozpoznanie pełnej lokalnej ścieżki do pliku. Ma to sens - jako klient nie chcesz, aby serwer znał system plików komputera lokalnego. Byłoby miło, gdyby to zrobiły wszystkie przeglądarki.

Posługiwać się

document.getElementById("file-id").files[0].name; 

zamiast

document.getElementById('file-id').value

Używam obiektu FileReader na onchangezdarzeniu wejściowym dla twojego typu pliku wejściowego! W tym przykładzie użyto funkcji readAsDataURL iz tego powodu powinieneś mieć tag. Obiekt FileReader ma również readAsBinaryString, aby uzyskać dane binarne, które można później wykorzystać do utworzenia tego samego pliku na serwerze

Przykład:

var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
    var img = document.getElementById("yourImgTag");
    img.src = event.target.result;
}

Jeśli przejdziesz do Internet Explorer, Narzędzia, Opcje internetowe, Zabezpieczenia, Niestandardowe, znajdź „Uwzględnij ścieżkę katalogu lokalnego podczas przesyłania plików na serwer” (jest to całkiem spory sposób) i kliknij „Włącz”. To zadziała

Cieszę się, że przeglądarki chcą nas uratować przed natrętnymi skryptami i tym podobnymi. Nie jestem zadowolony z IE umieszczającego w przeglądarce coś, co sprawia, że ​​prosta poprawka stylu wygląda jak atak hakera!

Użyłem <span> do reprezentowania wejścia pliku, dzięki czemu mogłem zastosować odpowiednią stylizację do <div> zamiast <input> (jeszcze raz, z powodu IE). Teraz z powodu tego IE chce pokazać Użytkownikowi ścieżkę o wartości, która gwarantuje, że będzie się pilnować i będzie co najmniej pełna obaw (jeśli nie całkowicie ich odstraszy?!) ... WIĘCEJ IE-CRAP!

W każdym razie, dzięki tym, którzy opublikowali wyjaśnienie tutaj: Zabezpieczenia przeglądarki IE: Dodanie „fakepath” do ścieżki pliku na wejściu [type = „file”] , stworzyłem drobny program naprawczy ...

Poniższy kod ma dwie rzeczy - naprawia błąd lte IE8, w którym zdarzenie onChange nie jest uruchamiane do momentu przesłania onBlur pola przesyłania i aktualizuje element oczyszczoną ścieżką pliku, który nie odstraszy użytkownika.

// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
    // document onReady wrapper
    $().ready(function(){
        // check for the nefarious IE
        if($.browser.msie) {
            // capture the file input fields
            var fileInput = $('input[type="file"]');
            // add presentational <span> tags "underneath" all file input fields for styling
            fileInput.after(
                $(document.createElement('span')).addClass('file-underlay')
            );
            // bind onClick to get the file-path and update the style <div>
            fileInput.click(function(){
                // need to capture $(this) because setTimeout() is on the
                // Window keyword 'this' changes context in it
                var fileContext = $(this);
                // capture the timer as well as set setTimeout()
                // we use setTimeout() because IE pauses timers when a file dialog opens
                // in this manner we give ourselves a "pseudo-onChange" handler
                var ieBugTimeout = setTimeout(function(){
                    // set vars
                    var filePath     = fileContext.val(),
                        fileUnderlay = fileContext.siblings('.file-underlay');
                    // check for IE's lovely security speil
                    if(filePath.match(/fakepath/)) {
                        // update the file-path text using case-insensitive regex
                        filePath = filePath.replace(/C:\\fakepath\\/i, '');
                    }
                    // update the text in the file-underlay <span>
                    fileUnderlay.text(filePath);
                    // clear the timer var
                    clearTimeout(ieBugTimeout);
                }, 10);
            });
        }
    });
})(jQuery);

Natrafiłem na ten sam problem. W IE8 można to obejść, tworząc ukryte dane wejściowe po kontroli danych wejściowych pliku. Wypełnij to wartością poprzedniego rodzeństwa. W IE9 zostało to również naprawione.

Moim powodem, aby poznać pełną ścieżkę, było utworzenie podglądu obrazu javascript przed przesłaniem. Teraz muszę załadować plik, aby utworzyć podgląd wybranego obrazu.

Jeśli naprawdę musisz przesłać pełną ścieżkę do pliku umieszczonego na górze, prawdopodobnie będziesz musiał użyć czegoś takiego jak podpisany aplet Java, ponieważ nie ma sposobu na uzyskanie tych informacji, jeśli przeglądarka ich nie wyśle.

wygląda na to, że nie możesz znaleźć pełnej ścieżki w twoim localhost przez js, ale możesz ukryć ścieżkę fakepath, aby po prostu wyświetlić nazwę pliku. Użyj jQuery, aby uzyskać nazwę pliku wejściowego wybranego pliku bez ścieżki

Użyj czytników plików:

$(document).ready(function() {
        $("#input-file").change(function() {
            var length = this.files.length;
            if (!length) {
                return false;
            }
            useImage(this);
        });
    });

    // Creating the function
    function useImage(img) {
        var file = img.files[0];
        var imagefile = file.type;
        var match = ["image/jpeg", "image/png", "image/jpg"];
        if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
            alert("Invalid File Extension");
        } else {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(img.files[0]);
        }

        function imageIsLoaded(e) {
            $('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });

        }
    }

Hy tam, w moim przypadku używam środowiska programistycznego asp.net, więc chciałem przesłać te dane w żądaniu asynchronus ajax, w [webMethod] nie można złapać programu do przesyłania plików, ponieważ nie jest to element statyczny, więc musiałem zrób takie rozwiązanie, ustalając ścieżkę, niż przekonwertuj poszukiwany obraz na bajty, aby zapisać go w DB.

Oto moja funkcja javascript, mam nadzieję, że pomoże ci:

function FixPath(Path)
         {
             var HiddenPath = Path.toString();
             alert(HiddenPath.indexOf("FakePath"));

             if (HiddenPath.indexOf("FakePath") > 1)
             {
                 var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
                 MainStringLength = HiddenPath.length - UnwantedLength;
                 var thisArray =[];
                 var i = 0;
                 var FinalString= "";
                 while (i < MainStringLength)
                 {
                     thisArray[i] = HiddenPath[UnwantedLength + i + 1];
                     i++;
                 }
                 var j = 0;
                 while (j < MainStringLength-1)
                 {
                     if (thisArray[j] != ",")
                     {
                         FinalString += thisArray[j];
                     }
                     j++;
                 }
                 FinalString = "~" + FinalString;
                 alert(FinalString);
                 return FinalString;
             }
             else
             {
                 return HiddenPath;
             }
         }

tutaj tylko do testowania:

 $(document).ready(function () {
             FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
         });
// this will give you : ~/EnsaLmadiLiYghiz

Uzupełnienie odpowiedzi Sardesh Sharma:

document.getElementById("file-id").files[0].path

Aby uzyskać pełną ścieżkę.