comment résoudre le C:\fakepath ?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.