web-dev-qa-db-ger.com

Wie löse ich das C:\fakepath auf?

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

Dies ist meine Upload-Schaltfläche.

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

In diesem Textfeld muss ich den vollständigen Pfad der Datei angeben.

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

Dies ist das JavaScript, das mein Problem löst. Aber in der Alarmstufe gibt es mich 

C:\fakepath\test.csv 

und Mozilla gibt mir:

test.csv

Aber ich möchte den lokalen vollständig qualifizierten Dateipfad . Wie kann dieses Problem gelöst werden?

Wenn dies auf Browsersicherheitsprobleme zurückzuführen ist, wie sollte dies alternativ erfolgen?

200
e_maxm

Einige Browser verfügen über eine Sicherheitsfunktion, die verhindert, dass JavaScript den lokalen vollständigen Pfad Ihrer Datei erkennt. Es ist sinnvoll - Sie möchten als Client nicht, dass der Server das Dateisystem Ihres lokalen Computers kennt. Es wäre schön, wenn alle Browser dies tun würden.

146
Joe Enos

Benutzen 

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

anstatt 

document.getElementById('file-id').value
53
Sardesh Sharma

Wenn Sie zu Internet Explorer, Extras, Internetoption, Sicherheit, Benutzerdefiniert gehen, finden Sie den Pfad "Einschließen des lokalen Verzeichnisses beim Hochladen von Dateien auf einen Server" (es gibt einige Möglichkeiten) und klicken auf "Aktivieren". Das wird funktionieren

37
saikiran1043

Ich verwende das Objekt FileReader für das Eingabeereignis onchange für Ihren Eingabedateityp! In diesem Beispiel wird die Funktion readAsDataURL verwendet. Aus diesem Grund sollten Sie über ein Tag verfügen. Das FileReader-Objekt enthält auch readAsBinaryString, um die Binärdaten abzurufen, die später zum Erstellen derselben Datei auf Ihrem Server verwendet werden können

Beispiel:

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;
}
33
chakroun yesser

Ich freue mich, dass Browser uns vor aufdringlichen Skripten und ähnlichem schützen möchten. Ich bin nicht zufrieden damit, dass IE etwas in den Browser einfügt, das einen einfachen Style-Fix wie einen Hack-Angriff aussehen lässt!

Ich habe ein <span> verwendet, um die Dateieingabe darzustellen, so dass ich anstelle von <input> (noch einmal wegen IE) ein entsprechendes Styling auf <div> anwenden konnte. Aus diesem Grund möchte IE dem Benutzer einen Pfad mit einem Wert zeigen, der sie garantiert nur auf der Hut hält und im geringsten besorgniserregend ist (wenn sie sie nicht völlig abschreckt?!) ... MEHR IE-CRAP !

Trotzdem danke denen, die die Erklärung hier gepostet haben: IE Browsersicherheit: Anhängen von "fakepath" an den Dateipfad in input [type = "file"] , ich habe einen kleineren Fixer zusammengesetzt- Oberer, höher...

Der folgende Code führt zwei Dinge aus: Er behebt einen IE8-Bug, bei dem das onChange -Ereignis erst ausgelöst wird, wenn das onBlur-Feld des Uploadfelds ein Element mit einem bereinigten Dateipfad aktualisiert, der den Benutzer nicht erschreckt.

// 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);
11
Anand Sharma

Ich bin durch dasselbe Problem gekommen. In IE8 könnte dies durch Erstellen einer versteckten Eingabe nach der Dateieingabesteuerung behoben werden. Füllen Sie dies mit dem Wert des vorherigen Geschwisters. In IE9 wurde dies ebenfalls behoben.

Ich wollte den vollständigen Pfad kennen lernen, weil ich vor dem Hochladen eine Javascript-Bildvorschau erstellt habe. Jetzt muss ich die Datei hochladen, um eine Vorschau des ausgewählten Bildes zu erstellen.

6
Telefoontoestel

Wenn Sie wirklich den vollständigen Pfad der Uploded-Datei senden müssen, müssen Sie wahrscheinlich so etwas wie ein signiertes Java-Applet verwenden, da diese Informationen nicht abgerufen werden können, wenn der Browser sie nicht sendet.

3
jcoder

anscheinend können Sie den vollständigen Pfad in Ihrem localhost nicht mit js finden. Sie können jedoch den Fakepath ausblenden, um nur den Dateinamen anzuzeigen. Benutze jQuery, um den Dateinamen der Dateieingabe ohne Pfad zu erhalten

1
Zernel

Ergänzend zu Sardesh Sharmas Antwortgebrauch:

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

Für vollen Weg.

0
Loaderon

In meinem Fall verwende ich die asp.net-Entwicklungsumgebung. Ich wollte diese Daten in asynchroner ajax-Anfrage hochladen. In [webMethod] können Sie den Datei-Uploader nicht abfangen, da er kein statisches Element ist Ich musste für eine solche Lösung einen Umsatz erzielen, indem ich den Pfad festlegte, dann das gewünschte Bild in Bytes konvertieren, um es in DB zu speichern. 

Hier ist meine Javascript-Funktion. Ich hoffe, es hilft Ihnen: 

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

hier nur zum testen: 

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

Dateileser verwenden:

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

        }
    }
0
Marcos Di Paolo