Comment obtenir le chemin complet du fichier sélectionné sur le changement d'utiliser javascript, jquery-ajax?

Comment obtenir le chemin complet du fichier lors de la sélection du fichier en utilisant <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 le filePath var contient only name du fichier sélectionné, pas le full path .

J'ai cherché sur le net, mais il semble que pour des raisons de sécurité les navigateurs (FF,chrome) donnent juste le nom du fichier.

Y a-t-il un autre moyen d'obtenir le chemin complet du fichier sélectionné?

167
demandé sur Yogesh Pingle 2013-03-04 15:59:37

9 réponses

pour des raisons de sécurité les navigateurs ne permettent pas cela, c.-à-d. JavaScript dans le navigateur n'a pas d'accès au système de fichiers, mais en utilisant L'API de fichier HTML5, seulement Firefox fournit une propriété mozFullPath , mais si vous essayez d'obtenir la valeur il retourne 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 utilisez plutôt l'API FileReader . Voici une question connexe sur SO: prévisualiser une image avant qu'elle ne soit téléchargée.

107
répondu undefined 2017-11-15 18:48:09

Essayez Ceci:

il vous donnera un chemin temporaire pas le chemin exact, vous pouvez utiliser ce script si vous voulez montrer des images sélectionnées comme dans cet exemple jsfiddle(essayez-le par images selectng 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 ça peut vous aider quelque part.

87
répondu DWX 2015-10-12 17:00:23

vous ne pouvez pas le faire - le navigateur ne permettra pas cela à cause de problèmes de sécurité.

Lorsqu'un fichier est sélectionné en utilisant l'entrée type = file object, la valeur de la valeur de la propriété dépend de la valeur de la "locale chemin de répertoire lors du téléchargement de fichiers vers un serveur " paramètres de sécurité pour la zone de sécurité utilisé pour afficher la page Web contenant l'entrée objet.

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

et autres

Vous avez raté ); à la fin de l'événement de changement de fonction.

aussi ne pas créer de fonction pour l'événement de changement au lieu de cela viens de l'utiliser comme ci-dessous,

<script type="text/javascript">

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

</script>
18
répondu Dipesh Parmar 2013-03-04 12:05:10

vous ne pouvez pas. La sécurité vous empêche de savoir quoi que ce soit sur le système de classement de l'ordinateur client - il peut même ne pas en avoir un! Il peut s'agir d'un MAC, D'un PC, d'une tablette ou d'un réfrigérateur avec accès internet - vous ne savez pas, vous ne pouvez pas savoir et vous ne le saurez pas. Et vous laisser avoir le chemin complet pourrait vous donner quelques 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 il nécessite un ActiveX de contrôle, et ne fonctionnera pas dans 99,99% des cas.

vous ne pouvez pas l'utiliser pour restaurer le fichier à l'emplacement original de toute façon (comme vous n'avez absolument aucun contrôle sur l'endroit où les téléchargements sont stockés, ou même s'ils sont stockés) donc en pratique, il n'est pas beaucoup d'utilisation pour vous de toute façon.

12
répondu Rajshekar Reddy 2013-11-22 05:47:41

tu le pensais?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});
10
répondu Aytac Gul 2014-11-23 20:01:45

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

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>
5
répondu Steffen Brem 2016-03-30 14:26:41

vous ne devriez jamais le faire....et je pense que l'essayer dans les derniers navigateurs est inutile (de ce que je sais) .. tous les navigateurs les plus récents d'autre part , ne permettra pas cela....

d'autres liens que vous pouvez parcourir , pour trouver une solution comme obtenir la valeur serverside, mais pas dans clientside (javascript)

chemin complet à partir de l'entrée du fichier en utilisant jQuery

Comment obtenir le chemin du fichier Formulaire D'entrée HTML dans Firefox 3

1
répondu bipen 2017-05-23 11:47:21

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 de changement contiendra:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"
1
répondu Blauhirn 2017-03-04 09:31:36

l'élément de fichier a et l'appel de tableau files il contient 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);
0
répondu Jeeva Kumar 2017-12-13 07:56:23