Come risolvere C: \ fakepath?

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

Questo è il mio pulsante di caricamento.

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

Questo è il campo di testo in cui devo mostrare il percorso completo del file.

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

Questo è il JavaScript che risolve il mio problema. Ma nel valore di avviso mi dà

C:\fakepath\test.csv 

e Mozilla mi dà:

test.csv

Ma voglio il percorso file completo locale . Come risolvere questo problema?

Se ciò è dovuto a un problema di sicurezza del browser, quale dovrebbe essere il modo alternativo per farlo?

Alcuni browser dispongono di una funzione di sicurezza che impedisce a JavaScript di conoscere il percorso completo locale del file. Ha senso: come client, non vuoi che il server conosca il filesystem della tua macchina locale. Sarebbe bello se tutti i browser lo facessero.

Uso

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

invece di

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

Uso l'oggetto FileReader onchangesull'evento di input per il tuo tipo di file di input! Questo esempio usa la funzione readAsDataURL e per questo motivo dovresti avere un tag. L'oggetto FileReader ha anche readAsBinaryString per ottenere i dati binari, che possono essere successivamente utilizzati per creare lo stesso file sul server

Esempio:

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

Se vai su Internet Explorer, Strumenti, Opzione Internet, Sicurezza, Personalizzato, trova il "Includi percorso directory locale durante il caricamento di file su un server" (è abbastanza in basso) e fai clic su "Abilita". Questo funzionerà

Sono felice che i browser si preoccupino di salvarci da script invadenti e simili. Non sono contento che IE inserisca qualcosa nel browser che fa sembrare una semplice correzione dello stile un attacco di hacking!

Ho usato un <span> per rappresentare l'input del file in modo da poter applicare uno stile appropriato al <div> invece che al <input> (ancora una volta, a causa di IE). Ora a causa di questo IE vuole mostrare all'Utente un percorso con un valore che è appena garantito per metterli in guardia e per lo meno apprensivi (se non addirittura spaventarli del tutto?!) ... PIÙ IE-CRAP!

Ad ogni modo, grazie a coloro che hanno pubblicato la spiegazione qui: IE Browser Security: aggiungendo "fakepath" al percorso del file in input [type = "file"] , ho messo insieme un fixer-upper ...

Il codice seguente fa due cose: corregge un bug IE8 in cui l'evento onChange non si attiva fino a quando il campo di caricamento è onBlur e aggiorna un elemento con un percorso file pulito che non spaventerà l'Utente.

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

Mi sono imbattuto nello stesso problema. In IE8 potrebbe essere aggirato creando un input nascosto dopo il controllo di input del file. Riempi questo con il valore del fratello precedente. In IE9 anche questo è stato corretto.

La mia ragione nel voler conoscere il percorso completo è stata quella di creare un'anteprima dell'immagine javascript prima del caricamento. Ora devo caricare il file per creare un'anteprima dell'immagine selezionata.

Se hai davvero bisogno di inviare il percorso completo del file scaricato, probabilmente dovresti usare qualcosa come un'applet java firmata in quanto non c'è modo di ottenere queste informazioni se il browser non lo invia.

sembra che non riesci a trovare il percorso completo nel tuo localhost di js, ma puoi nascondere il percorso falso per mostrare solo il nome del file. Utilizzare jQuery per ottenere il nome file selezionato per l'input del file senza il percorso

Usa lettori di file:

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

        }
    }

Ehilà, nel mio caso sto usando l'ambiente di sviluppo asp.net, quindi volevo caricare quei dati nella richiesta ajax asincrona, in [webMethod] non è possibile catturare il file uploader poiché non è un elemento statico, quindi ho dovuto fare un giro d'affari per tale soluzione fissando il percorso, quindi convertire l'immagine desiderata in byte per salvarla nel DB.

Ecco la mia funzione JavaScript, spero che ti aiuti:

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

qui solo per i test:

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

Per integrare la risposta di Sardesh Sharma utilizzare:

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

Per il percorso completo.