Comment résoudre le C: \ fakepath?

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

Ceci est mon bouton de téléchargement.

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

C'est le champ de texte où je dois montrer le chemin complet du fichier.

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

C'est le JavaScript qui résout mon problème. Mais dans la valeur d'alerte me donne

C:\fakepath\test.csv 

et Mozilla me donne:

test.csv

Mais je veux le chemin d'accès au fichier local complet . Comment résoudre ce problème?

Si cela est dû à un problème de sécurité du navigateur, quelle devrait être l'autre façon de procéder?

e_maxm
la source
41
Il s'agit de l'implémentation de sécurité du navigateur - le navigateur vous protège contre l'accès à la structure de votre disque. Cela pourrait aider si vous pouvez expliquer pourquoi vous voulez le chemin complet.
Stuart
1
Qu'entendez-vous par URL complète ? Adresse du fichier téléchargé?
gor
4
Pour mémoire, IE ne donne que le bit "fakepath" parce qu'ils ne voulaient pas que les serveurs qui "s'attendaient" à un chemin se cassent. Sinon, tout comme les autres navigateurs pour des raisons de sécurité, vous n'obtiendrez que le nom du fichier (pas de chemin). Plus important encore, à moins que vous n'ayez des intentions malveillantes, je ne vois pas pourquoi la connaissance du chemin fournit quelque chose d'utile.
scunliffe
2
browser security issue~ si elle est implémentée dans le navigateur (à juste titre), il est très peu probable que vous puissiez la contourner
Ross
13
Bon sang, je garde tous mes fichiers dedans, C:\fakepathdonc maintenant tout le monde connaît ma structure de répertoires.
mbomb007

Réponses:

173

Certains navigateurs ont une fonction de sécurité qui empêche JavaScript de connaître le chemin d'accès local complet de votre fichier. Cela a du sens - en tant que client, vous ne voulez pas que le serveur connaisse le système de fichiers de votre machine locale. Ce serait bien si tous les navigateurs faisaient cela.

Joe Enos
la source
9
Si le navigateur n'envoie pas le chemin du fichier local, il n'y a aucun moyen de le découvrir.
Petteri Hietavirta
47
Il suffit de poster le formulaire: le navigateur se chargera du téléchargement. Votre site Web n'a pas besoin de connaître le chemin complet de retour sur le client.
Rup
2
@ruffp Vous ne pouvez télécharger qu'avec un message, vous devez donc mettre le téléchargement dans un formulaire et le soumettre. Cela utilisera toujours un contrôle de téléchargement de fichier standard pour choisir le fichier et vous n'aurez toujours pas besoin du nom de fichier complet du client.
Rup
6
Je doute qu'il y ait quelque chose de malveillant qu'un site Web normal puisse faire sur votre machine locale sans une sorte de plugin de confiance comme Flash ou Java. C'est plus une question de confidentialité. Par exemple, si vous téléchargez à partir de votre bureau, vous seriez laisser le serveur connaître votre nom d' utilisateur sur votre machine locale ou d'un domaine ( c:\users\myname\desktopou /Users/myname/Desktop/ou autre). Ce n'est pas quelque chose qu'un serveur Web doit savoir.
Joe Enos
8
La confidentialité concerne presque toujours la sécurité et la vulnérabilité, car les informations peuvent être utilisées contre quelqu'un. Les attaques exploitent fréquemment plusieurs problèmes pour atteindre leurs objectifs. Toute personne ne reconnaissant pas les dangers ne devrait pas être autorisée à proximité de code autre que Hello World sans ateliers supplémentaires sur la façon d'être paranoïaque.
Archimedix
70

Utilisation

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

au lieu de

document.getElementById('file-id').value
Sardesh Sharma
la source
16
Dans Chrome 44.0.2403.125, cela ne vous fournit que le nom de fichier.
écart
4
Utilisez ensuite document.getElementById ("file-id"). Files [0] .path. Fonctionne bien pour moi.
Loaderon
Merci @Loaderon, vous devriez poster ceci comme réponse!
7geeky
45

J'utilise l'objet FileReader sur l' onchangeévénement d' entrée pour votre type de fichier d'entrée! Cet exemple utilise la fonction readAsDataURL et pour cette raison, vous devriez avoir une balise. L'objet FileReader a également readAsBinaryString pour obtenir les données binaires, qui peuvent ensuite être utilisées pour créer le même fichier sur votre serveur

Exemple:

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;
}
chakroun yesser
la source
une idée pourquoi même cela ne fonctionne pas sur localhost? la source est définie comme src = "C: \ fakepath \ filename.jpg" mais console.logging l'élément image dit que le src est un dataURL
galki
réponse: restitution de la dorsale: /
galki
1
Vous n'avez aucune idée de la frustration que cette entrée a enregistrée. C'est un diamant brut ... seulement 12 votes positifs mais méritant bien plus. Je suis content d'avoir regardé plus bas car les autres entrées avec des votes beaucoup plus élevés ne fonctionnaient pas et FormData () ne fera pas l'affaire à nos fins. Bien joué!
user1585204
9
La question demande le chemin d'accès au fichier et non le contenu du fichier.
Quentin
@Quentin: oui, vous avez raison, mais clairement l'objectif de l'OP est de pouvoir en quelque sorte télécharger le fichier sur le serveur. Ainsi, cette solution fonctionnerait certainement très utile à toutes les personnes qui recherchent un moyen de télécharger des fichiers sur un serveur à l'aide de JS.
user18490
36

Si vous allez dans Internet Explorer, Outils, Option Internet, Sécurité, Personnalisé, trouvez le "Inclure le chemin du répertoire local lors du téléchargement de fichiers sur un serveur" (c'est un peu plus bas) et cliquez sur "Activer". Cela fonctionnera

saikiran1043
la source
2
Existe-t-il quelque chose de similaire à Chrome?
Zaven Zareyan
11

Je suis heureux que les navigateurs se soucient de nous sauver des scripts intrusifs et autres. Je ne suis pas content qu'IE place quelque chose dans le navigateur qui fasse ressembler une simple correction de style à une attaque de piratage!

J'ai utilisé un <span> pour représenter l'entrée de fichier afin que je puisse appliquer un style approprié à la <div> au lieu de la <input> (encore une fois, à cause d'IE). Maintenant, en raison de cet IE, vous voulez montrer à l'utilisateur un chemin avec une valeur qui est juste garantie de le mettre en garde et le moins du monde (sinon de le faire complètement peur?!) ... PLUS IE-CRAP!

Quoi qu'il en soit, grâce à ceux qui ont posté l'explication ici: Sécurité du navigateur IE: en ajoutant "fakepath" au chemin du fichier en entrée [type = "file"] , j'ai mis en place un fixateur mineur supérieur ...

Le code ci-dessous fait deux choses - il corrige un bogue IE8 lte où l'événement onChange ne se déclenche pas jusqu'à ce que le champ de téléchargement soit onBlur et il met à jour un élément avec un chemin de fichier nettoyé qui ne fera pas peur à l'utilisateur.

// 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);
Anand Sharma
la source
Veuillez noter que cela ne fonctionne pas sur IE, donc; J'ai remplacé ce qui suit: filePath.substring (filePath.lastIndexOf ('\\') + 1, filePath.length)
Bassel Kh
6

Je suis tombé sur le même problème. Dans IE8, il pourrait être contourné en créant une entrée masquée après le contrôle d'entrée de fichier. Le remplir avec la valeur de son frère précédent. Dans IE9, cela a également été corrigé.

Ma raison de vouloir connaître le chemin complet était de créer un aperçu d'image javascript avant le téléchargement. Maintenant, je dois télécharger le fichier pour créer un aperçu de l'image sélectionnée.

Telefoontoestel
la source
1
Si quelqu'un veut voir une image avant de la télécharger, il peut la visualiser sur son ordinateur.
mbomb007
4

Si vous avez vraiment besoin d'envoyer le chemin complet du fichier uplodé, vous devrez probablement utiliser quelque chose comme une applet java signée car il n'y a aucun moyen d'obtenir ces informations si le navigateur ne les envoie pas.

jcoder
la source
< "jpeg, .jpg, .png" input type = "file" accept =>. Comment FULLPATH chemin original i obtenir chemin faux, comment reslove il
Govind Sharma
1

Utilisez des lecteurs de fichiers:

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

        }
    }
Marcos Di Paolo
la source
-1

Hy là-bas, dans mon cas, j'utilise l'environnement de développement asp.net, donc je voulais télécharger ces données dans la demande ajax asynchrone, dans [webMethod] vous ne pouvez pas attraper le téléchargeur de fichier car ce n'est pas un élément statique, donc j'ai dû faire un chiffre d'affaires pour une telle solution en fixant le chemin, puis convertir l'image souhaitée en octets pour l'enregistrer dans la base de données.

Voici ma fonction javascript, j'espère qu'elle vous aidera:

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

ici uniquement pour les tests:

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

Pour compléter la réponse de Sardesh Sharma, utilisez:

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

Pour chemin complet.

Loaderon
la source
Cela undefinedme revient dans FireFox 75.0. pathExiste-t- il réellement? Avez-vous une référence à la documentation à ce sujet?
Jose Manuel Abarca Rodríguez
1
Salut! J'ai posté cette réponse après avoir essayé de résoudre le problème moi-même et avoir réussi à utiliser le chemin d'accès. Je ne me souviens pas dans quel projet j'essayais cela, mais j'utilise toujours Google Chrome, peut-être que cette solution ne convient qu'à ce navigateur. Et il pourrait même être devenu obsolète en raison des mises à jour du navigateur. Désolé de ne pas pouvoir vous aider davantage: /
Loaderon