288 votes

comment résoudre le C:\fakepath ?

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

C'est mon bouton de téléchargement.

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

Il s'agit du champ de texte dans lequel je dois indiquer le chemin complet du fichier.

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

Voici le javascript qui résout mon problème. Mais dans la valeur d'alerte, cela me donne

C:\fakepath\test.csv 

et Mozilla me donne :

test.csv

Mais je veux full url . Comment résoudre ce problème ?

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

49 votes

Il s'agit de l'implémentation de la sécurité du navigateur - le navigateur vous protège de l'accès à la structure de votre disque. Il pourrait être utile d'expliquer pourquoi vous voulez le chemin complet.

1 votes

Que voulez-vous dire par url complète ? Adresse du fichier téléchargé ?

0 votes

@gor, oui. Disons que mon fichier est dans '/home/..../.../mydir/test.csv'.

191voto

Joe Enos Points 17442

Certains navigateurs ont une fonction de sécurité qui empêche le javascript de connaître le chemin complet de votre fichier local. C'est logique : 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 le faisaient.

1 votes

Alors quel est le moyen alternatif de connaître l'url complète ?

9 votes

Si le navigateur n'envoie pas le chemin d'accès au fichier local, il n'y a aucun moyen de le découvrir.

51 votes

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 d'accès complet du client.

56voto

chakroun yesser Points 355

J'utilise l'objet FileReader sur l'entrée onchange pour votre type de fichier d'entrée !

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

0 votes

Une idée de la raison pour laquelle cela ne fonctionne pas sur localhost ? la source est définie comme src=" C:\fakepath\filename.jpg " mais le fichier console.logging de l'élément image indique que le src est un dataURL.

0 votes

Réponse : backbone rerendering :/

1 votes

Vous n'avez aucune idée de la frustration que cette entrée a évitée. C'est un diamant brut ... seulement 12 votes positifs mais qui méritent beaucoup plus. Je suis content d'avoir regardé plus bas parce que les autres entrées avec des votes positifs beaucoup plus élevés ne fonctionnaient pas et aussi parce que FormData() ne fera pas l'affaire pour nos besoins. Bien fait !

36voto

saikiran1043 Points 227

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

4 votes

Existe-t-il quelque chose de similaire à Chrome ?

0 votes

Non, c'est uniquement IE.

11voto

Anand Sharma Points 101

Je suis heureux que les navigateurs se soucient de nous préserver des scripts intrusifs et autres. Je ne suis pas content qu'IE mette quelque chose dans le navigateur qui fait qu'une simple correction de style ressemble à un piratage !

J'ai utilisé un < span > pour représenter le fichier d'entrée afin de pouvoir appliquer le style approprié à la < div > au lieu de la < input > (une fois de plus, à cause d'IE). Maintenant, à cause de cela, IE veut montrer à l'utilisateur un chemin d'accès avec une valeur qui est juste garantie pour le mettre sur ses gardes et pour le moins l'appréhender (si ce n'est pas totalement l'effrayer ? !)... ENCORE PLUS D'IE-CRAP !

Quoi qu'il en soit, merci à ceux qui ont publié l'explication ici : Sécurité du navigateur IE : Ajout de "fakepath" au chemin du fichier dans input [type="file"] j'ai mis en place un petit bricolage...

Le code ci-dessous fait deux choses : il corrige un bogue dans IE8 où l'événement onChange ne se déclenche pas avant le onBlur du champ de téléchargement et il met à jour un élément avec un chemin de fichier nettoyé qui n'effraie pas 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);

0 votes

Veuillez noter que cela ne fonctionne pas sur IE, donc j'ai remplacé ce qui suit : filePath.substring(filePath.lastIndexOf(' \\ ')+ 1 , filePath.length)

6voto

Telefoontoestel Points 31

J'ai rencontré le même problème. Dans IE8, il est possible de contourner le problème en créant une entrée cachée après le contrôle de saisie du fichier. Il fallait alors remplir ce champ avec la valeur du champ précédent. Dans IE9, ce problème a également été résolu.

La raison pour laquelle je voulais connaître le chemin complet était de créer un aperçu de l'image en 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.

1 votes

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X