web-dev-qa-db-fra.com

Chemin complet de l'entrée du fichier à l'aide de jQuery

Lorsque j'appelle val() sur une entrée avec type="file" Je reçois uniquement le nom du fichier plutôt que le chemin complet. Comment puis-je obtenir le chemin complet?

jqueryinputfile-type
38
gruszczy

Vous ne pouvez pas: c'est une fonction de sécurité dans tous les navigateurs modernes.

Pour IE8 , il est désactivé par défaut, mais peut être réactivé à l'aide d'un paramètre de sécurité:

Lorsqu'un fichier est sélectionné à l'aide de l'objet input type = file, la valeur de la propriété value dépend de la valeur du paramètre de sécurité "Inclure le chemin du répertoire local lors du téléchargement de fichiers vers un serveur" pour la zone de sécurité utilisée pour afficher la page Web contenant l'objet d'entrée.

Le nom de fichier complet du fichier sélectionné est renvoyé uniquement lorsque ce paramètre est activé. Lorsque le paramètre est désactivé, Internet Explorer 8 remplace le lecteur local et le chemin du répertoire par la chaîne C:\fakepath\afin d'empêcher la divulgation d'informations inappropriées.

Dans tous les autres navigateurs courants actuels que je connais, il est également désactivé. Le nom de fichier est le meilleur que vous puissiez obtenir.

Des informations plus détaillées et de bons liens dans cette question . Cela fait référence à l'obtention de la valeur côté serveur, mais le problème est le même en JavaScript avant la soumission du formulaire.

47
Pekka 웃

Eh bien, obtenir un chemin complet n'est pas possible, mais nous pouvons avoir un chemin temporaire.

Essaye ça:

Cela vous donnera un chemin temporaire pas le chemin précis, vous pouvez utiliser ce script si vous souhaitez afficher les images sélectionnées comme dans cet exemple jsfiddle (Essayez-le en sélectionnant des images ainsi que d'autres fichiers): -

JSFIDDLE

Voici le code: -

HTML: -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
    <br>
<img src="" width="200" style="display:none;" />
        <br>
<div id="disp_tmp_path"></div>

JS: -

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

Ce n'est pas exactement ce que vous cherchiez, mais peut-être que cela peut vous aider quelque part.

15
DWX