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 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?

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.

Utilisation

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

au lieu de

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

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

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

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

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.

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.

semble que vous ne pouvez pas trouver le chemin complet dans votre localhost par js, mais vous pouvez masquer 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

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

        }
    }

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

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

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

Pour chemin complet.