Comment obtenir le chemin complet du fichier sélectionné lors du changement de <input type = 'file'> en utilisant javascript, jquery-ajax?

240

Comment obtenir le chemin complet du fichier lors de la sélection du fichier à l'aide <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

mais la var filePath contient le only namefichier sélectionné, pas le full path.
Je l'ai cherché sur net, mais il semble que pour des raisons de sécurité les navigateurs (FF, chrome) donnent juste le nom du fichier.
Existe-t-il un autre moyen d'obtenir le chemin complet du fichier sélectionné?

Yogesh Pingle
la source
@nauphal merci pour le commentaire, mais existe-t-il un autre moyen d'obtenir le chemin complet du fichier sélectionné?
Yogesh Pingle
1
Si vous êtes dans le cas où vous souhaitez obtenir le chemin d'un fichier sur le serveur , (par exemple en créant une interface Web vers un utilitaire de ligne de commande à exécuter sur le serveur), vous pouvez toujours créer le chemin relatif, envoyez-le comme <option> et utilisez un widget d'arborescence ou tapez à l'avance pour permettre à l'utilisateur de le sélectionner, puis de laisser le serveur traiter le fichier.
dardenfall
2
Copie

Réponses:

164

Pour des raisons de sécurité, les navigateurs ne le permettent pas, c'est-à-dire que JavaScript dans le navigateur n'a pas accès au système de fichiers, mais en utilisant l'API de fichier HTML5, seul Firefox fournit une mozFullPathpropriété, mais si vous essayez d'obtenir la valeur, il renvoie une chaîne vide:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

Alors ne perdez pas votre temps.

edit: Si vous avez besoin du chemin du fichier pour lire un fichier, vous pouvez utiliser l' API FileReader à la place. Voici une question connexe sur SO: prévisualiser une image avant de la télécharger.

indéfini
la source
1
Voir ce lien car il m'a aidé avec le même problème.
Amir Tugi
... Le titre de la question liée est: Aperçu d'une image avant son téléchargement .
indéfini
Et pourtant, cela m'a donné l'URL du chemin à envoyer au serveur
Amir Tugi
1
@AmirTugi Cette solution lit un fichier. Cela n'a rien à voir avec le chemin du fichier sur le système de fichiers de l'utilisateur.
indéfini
Alors, comment ce site Web pourrait-il le faire?
SaidbakR
102

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.

DWX
la source
Existe-t-il un moyen de le faire avec d'autres types de fichiers: pdf, docx, etc. et au lieu de l'image, affichez une icône? Pour mes utilisations, je veux stocker les fichiers sur la page avant de les envoyer, donnant à l'utilisateur la possibilité d'ajouter un commentaire à charger avec comme un message avec un texte.
user1040975
Dois-je seulement mettre le contenu de "tmppath" dans la barre d'adresse du navigateur? J'ai essayé et ça ne marche pas.
MacGruber
@GangsarSwaPurba Malheureusement, cela ne fonctionne pas dans IE9 - voir URL.createObjectURL () .
naXa
@naXa bien, je vais modifier mon commentaire ci-dessus. uw, je ne peux malheureusement pas modifier mon commentaire
Gangsar Swapurba
2
Dans la 3ème ligne, vous devez utiliser la variable tmppath au lieu de URL.createObjectURL (event.target.files [0]), c'est plus optimisé.
Wessam El Mahdy
17

Vous ne pouvez pas le faire - le navigateur ne le permettra pas pour des raisons 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.

Et autre

Vous l'avez manqué );à la fin de la fonction d'événement de modification.

Ne créez pas non plus de fonction pour l'événement de changement, utilisez-le simplement comme ci-dessous,

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>
Dipesh Parmar
la source
19
J'ai essayé votre code mais ça me donne un mauvais chemin. mon fichier est dans le Drépertoire mais la valeur arriveC:\fakepath\test.xls
Rahul Munjal
3
C: \ fakepath \ fileName.xls ... quelqu'un sait comment résoudre ce problème?
André Dos Santos
14

Tu ne peux pas. La sécurité vous empêche de tout savoir sur le système de classement de l'ordinateur client - il peut même ne pas en avoir! Il peut s'agir d'un MAC, d'un PC, d'une tablette ou d'un réfrigérateur compatible Internet - vous ne savez pas, ne pouvez pas savoir et ne saurez pas. Et vous donner le chemin complet pourrait vous donner des informations sur le client - en particulier s'il s'agit d'un lecteur réseau par exemple.

En fait, vous pouvez l'obtenir dans des conditions particulières, mais cela nécessite un contrôle ActiveX et ne fonctionnera pas dans 99,99% des circonstances.

Vous ne pouvez pas l'utiliser pour restaurer le fichier à l'emplacement d'origine de toute façon (car vous n'avez absolument aucun contrôle sur l'emplacement de stockage des téléchargements, ou même s'ils sont stockés), donc en pratique, cela ne vous est pas très utile de toute façon.

Rajshekar Reddy
la source
11

Vouliez-vous dire cela?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});
Aytac Gul
la source
4
cela ne donne pas le chemin d'accès au fichier. Pourquoi avoir voté autant de fois?
FlowUI. SimpleUITesting.com
7

Vous pouvez utiliser le code suivant pour obtenir une URL locale fonctionnelle pour le fichier téléchargé:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>
Steffen Brem
la source
5

Une remarque intéressante: bien que cela ne soit pas disponible sur le Web, si vous utilisez JS dans Electron, vous pouvez le faire.

En utilisant l'entrée de fichier HTML5 standard, vous recevrez une pathpropriété supplémentaire sur les fichiers sélectionnés, contenant le vrai chemin de fichier.

Documents complets ici: https://github.com/electron/electron/blob/master/docs/api/file-object.md

Tim Perry
la source
1

Vous pouvez, si le téléchargement d'un dossier entier est une option pour vous

<input type="file" webkitdirectory directory multiple/>

L'événement change contient:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"
phil294
la source
1

vous ne devriez jamais le faire ... et je pense que l'essayer dans les derniers navigateurs est inutile (d'après ce que je sais) ... par contre, tous les derniers navigateurs ne le permettront pas ...

d'autres liens que vous pouvez parcourir, pour trouver une solution de contournement comme obtenir la valeur côté serveur, mais pas dans côté client (javascript)

Chemin complet de l'entrée de fichier à l'aide de jQuery
Comment obtenir le chemin de fichier à partir du formulaire d'entrée HTML dans Firefox 3

bipen
la source
-1

l'élément de fichier a et le tableau l'appelle filescontient toutes les choses nécessaires dont vous avez besoin

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);
Jeeva Kumar
la source
2
Il ne fournit pas le chemin complet du fichier téléchargé.
Sergiu Mare
-3

Vous pouvez obtenir le chemin complet du fichier sélectionné à télécharger uniquement par IE11 et MS Edge.

var fullPath = Request.Form.Files["myFile"].FileName;
Libertad
la source