web-dev-qa-db-fra.com

Comment obtenir le chemin complet du fichier sélectionné lors du changement de <type d’entrée = ‘fichier’> en utilisant javascript, jquery-ajax?

Comment obtenir le chemin complet du fichier lors de la sélection de 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 la variable filePath contient only name du fichier sélectionné, pas le full path.
Je l'ai cherché sur le net, mais il semble que pour des raisons de sécurité, les navigateurs (FF, chrome) ne donnent que le nom du fichier.
Y at-il un autre moyen d’obtenir le chemin complet du fichier sélectionné?

javascriptjqueryfile-uploadfilepath
206
Yogesh Pingle

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. Toutefois, avec l’API de fichier HTML5, seul Firefox fournit une propriété mozFullPath, mais si vous essayez d’obtenir la valeur, il renvoie un objet vide. chaîne:

$('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 . Voici une question connexe sur SO: Aperçu d'une image avant son téléchargement.

129
undefined

Essaye ça:

Cela vous donnera un chemin temporaire et non le chemin exact. 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 peut-il vous aider quelque part.

96
DWX

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 sur 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 de répertoire par la chaîne C:\fakepath\afin d'empêcher la divulgation d'informations inappropriées.

Et autre

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

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

<script type="text/javascript">

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

</script>
17
Dipesh Parmar

Tu ne peux pas. La sécurité vous empêche de tout savoir sur le système de classement de l'ordinateur client - il n'en est peut-être même pas équipé! Il peut s'agir d'un MAC, d'un PC, d'une tablette ou d'un réfrigérateur Internet: vous ne savez pas, ne pouvez pas savoir et vous 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 cas.

De toute façon, vous ne pouvez pas l'utiliser pour restaurer le fichier à son emplacement d'origine (vous n'avez absolument aucun contrôle sur l'endroit où les téléchargements sont stockés, ni même s'ils sont stockés), de sorte qu'en pratique, vous ne l'utilisez pas beaucoup.

13
Rajshekar Reddy

Vouliez-vous dire cela?

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

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

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

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

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

événement change contiendra:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"
1
Blauhirn

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) ... tous les derniers navigateurs, par contre, ne le permettront pas ...

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

chemin complet de l'entrée du fichier en utilisant jQuery
Comment obtenir le chemin du fichier depuis le formulaire de saisie HTML dans Firefox

1
bipen

l'élément de fichier contient un tableau appelé files qui contient tout le matériel nécessaire

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
Jeeva Kumar

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;
0
Libertad