web-dev-qa-db-fra.com

Comment résoudre le C:\fakepath?

<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 local pleinement qualifié . Comment résoudre ce problème?

Si cela est dû à un problème de sécurité du navigateur, quelle autre méthode devrait être utilisée?

200
e_maxm

Certains navigateurs disposent d'une fonctionnalité de sécurité qui empêche JavaScript de connaître le chemin d'accès 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 le faisaient.

146
Joe Enos

Utilisation 

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

au lieu de 

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

Si vous allez dans Internet Explorer, Outils, Option Internet, Sécurité, Personnalisé, recherchez l’option "Inclure le chemin du répertoire local lors du téléchargement de fichiers sur un serveur" (c’est assez grave) et cliquez sur "Activer". Ça va marcher

37
saikiran1043

J'utilise l'objet FileReader sur l'événement input onchange pour votre type de fichier d'entrée! Cet exemple utilise la fonction readAsDataURL et pour cette raison, vous devez 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;
}
33
chakroun yesser

Je suis heureux que les navigateurs se soucient de nous sauver des scripts intrusifs et autres. Je ne suis pas satisfait de IE ajouter dans le navigateur un correctif de style simple ressemblant à une attaque de hack!

J'ai utilisé un <span> pour représenter l'entrée de fichier afin de pouvoir appliquer le style approprié à <div> au lieu de <entrée> (encore une fois, à cause de IE). Maintenant, à cause de ceci IE veut montrer à l'utilisateur un chemin avec une valeur qui est juste garantie de les mettre sur ses gardes et le moins inquiet possible (si ce n'est pas totalement effrayer les!?) ... PLUS IE -MERDE!

Quoi qu'il en soit, merci à ceux qui ont posté l'explication ici: IE Sécurité du navigateur: ajout de "fakepath" au chemin du fichier dans input [type = "fichier"] , j'ai mis en place une mineure fixateur-supérieur ...

Le code ci-dessous fait deux choses - il corrige un bogue IE8 lte où l'événement onChange ne se déclenche que lorsque le champ de téléchargement est onBlur et 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);
11
Anand Sharma

Je suis tombé sur le même problème. Dans IE8, vous pouvez contourner ce problème en créant une entrée masquée après le contrôle de saisie du 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.

6
Telefoontoestel

Si vous devez vraiment envoyer le chemin complet du fichier téléchargé, vous devrez probablement utiliser quelque chose comme une applet Java signée, car il n'y a aucun moyen d'obtenir cette information si le navigateur ne l'envoie pas.

3
jcoder

semble que vous ne pouvez pas trouver le chemin complet dans votre localhost par js, mais vous pouvez cacher le fakepath pour afficher simplement le nom du fichier Utilisez jQuery pour obtenir le nom de fichier sélectionné de l'entrée de fichier sans le chemin

1
Zernel

En complément de la réponse de Sardesh Sharma, utilisez:

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

Pour le chemin complet.

0
Loaderon

Hy, dans mon cas, j'utilise un environnement de développement asp.net, donc je voulais télécharger ces données dans une requête asynchrone ajax. Dans [WebMethod], vous ne pouvez pas attraper le programme de téléchargement car il ne s'agit pas d'un élément statique. Je devais faire un chiffre d'affaires pour une telle solution en fixant le chemin, puis convertir l'image recherchée en octets pour l'enregistrer dans la base de données. 

Voici ma fonction javascript, Espérons que cela 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
0
Shiva Brahma

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

        }
    }
0
Marcos Di Paolo