Comment obtenir le chemin du fichier à partir du formulaire D'entrée HTML dans Firefox 3

nous avons simple forme HTML avec <input type="file"> , comme montré ci-dessous: 

<form>
  <label for="attachment">Attachment:</label>
  <input type="file" name="attachment" id="attachment">
  <input type="submit">
</form>

dans IE7 (et probablement tous les navigateurs célèbres, y compris L'ancien Firefox 2), si nous soumettons un fichier comme '//server1/path/to/file/filename' il fonctionne correctement et donne le chemin complet à la fichier et le nom de fichier.

dans Firefox 3, il ne renvoie que 'nom de fichier', en raison de leur nouvelle 'fonctionnalité de sécurité' pour tronquer le chemin, comme expliqué dans le système de suivi des bogues Firefox ( https://bugzilla.mozilla.org/show_bug.cgi?id=143220 )

Je n'ai aucune idée comment surmonter cette 'nouvelle fonctionnalité' parce qu'il provoque toutes les formes de téléchargement dans mon webapp pour arrêter de travailler sur Firefox 3.

est-ce que quelqu'un peut aider à trouver une solution unique pour obtenir le chemin du fichier à la fois sur Firefox 3 et IE7?

51
demandé sur kamal 2008-09-17 12:38:49

9 réponses

dans IE7 (et probablement tous les navigateurs célèbres, y compris L'ancien Firefox 2), si nous soumettons un fichier comme '//server1/path/to/file/filename' cela fonctionne correctement et donne le chemin complet vers le fichier et le nom de fichier.

Je n'ai aucune idée comment surmonter cette 'nouvelle fonctionnalité' parce qu'il provoque toutes les formes de téléchargement dans mon webapp pour arrêter de travailler sur Firefox 3.

il y a un gros malentendu. Pourquoi vous avez besoin de la plein chemin d'accès au fichier sur le serveur? Imaginez que je suis le client et j'ai un fichier C:\path\to\passwords.txt et je donne le chemin complet du fichier. Comment, en tant que serveur, obtiendriez-vous son contents ? Avez-vous une connexion TCP ouverte à mon système de fichiers Disque local? Avez-vous testé la fonctionnalité de téléchargement de fichiers lorsque vous avez mis votre webapp en production sur une autre machine de serveur?

, Il ne fonctionnera que lorsque à la fois le client et le serveur tournent à physiquement la même machine , parce que vous aurez alors l'accès au même système de fichiers de disque dur. Cela ne se produirait que lorsque vous développez localement votre site web et que le webbrowser (client) et le webserver (serveur) par coïncidence fonctionnent sur la même machine.

que le chemin complet du fichier est envoyé dans MSIE et d'autres anciens en raison d'un bug de sécurité . Les spécifications W3 et RFC2388 n'ont jamais mentionné d'inclure le chemin complet du fichier. Seulement le nom du fichier. Firefox fait son travail correctement.

Pour gérer les fichiers téléchargés, vous ne devriez pas avoir besoin de connaître le chemin complet du fichier. Vous devriez plutôt être intéressé par le dossier complet contenu "1519250920 que le client a déjà envoyé au serveur dans le organisme demandeur dans le cas d'une demande multipart/form-data . Changez votre formulaire pour ressembler à ce qui suit comme indiqué dans RFC2388: 

<form action="upload-script-url" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>

Comment obtenir le contenu du fichier téléchargé dans le côté serveur dépend du langage de programmation côté serveur que vous utilisez.

  • Java / JSP : vous souhaitez utiliser l'API HttpServletRequest#getPart() ou Apache Commons FileUpload pour l'analyser. Vous devriez vous retrouver avec un InputStream avec le contenu du fichier qui vous peut écrire à toute OutputStream à votre goût. Vous pouvez trouver un exemple dans cette réponse .

  • Java/JSF : vous souhaitez utiliser le composant <h:inputFile> ou tout autre composant de téléchargement de fichiers fourni par la bibliothèque de composants que vous utilisez. Ici aussi, vous souhaitez obtenir le contenu du fichier dans la saveur d'un InputStream . Voir cette réponse pour un exemple.

  • PHP : le contenu du fichier est déjà stocké implicitement sur le disque temp. Vous souhaitez utiliser la fonction move_uploaded_file() pour le déplacer à l'endroit désiré. Voir aussi PHP manual .

  • ASP.NET : aucune réponse détaillée de ma part puisque je ne le fais pas, mais Google a trouvé quelques exemples pour moi: ASP.NET exemple , ASP.NET 2.0 exemple

chaque fois que vous voulez obtenir la partie nom de fichier du fichier téléchargé, vous devez trim le chemin complet hors du nom de fichier. Cette information est complètement hors de propos pour vous. Voir aussi par exemple ceci: Apache Commons FileUpload FAQ entry

pourquoi FileItem.getName () renvoie tout le chemin, et pas seulement le nom du fichier?

Internet Explorer fournit le chemin complet vers le fichier téléchargé et pas seulement le nom du fichier de base. Puisque FileUpload fournit exactement ce qui a été fourni par le client (navigateur), vous pouvez supprimer cette information de chemin dans votre application.

60
répondu BalusC 2017-05-23 12:25:51

Pour afficher un aperçu dans Firefox fonctionne cet attachement est l'objet de la fixation de l'élément dans le premier exemple: 

           if (attachment.files)
             previewImage.src = attachment.files.item(0).getAsDataURL();
           else
             previewImage.src = attachment.value;
10
répondu houba 2010-01-03 18:12:13

en fait, juste avant que FF3 ne soit sorti, j'ai fait quelques expériences, et FF2 n'envoie que le nom du fichier, comme L'a fait Opera 9.0. Seul IE envoie le chemin complet. Le comportement a du sens, parce que le serveur n'a pas besoin de savoir où l'utilisateur stocke le fichier sur son ordinateur, il est sans rapport avec le processus de téléchargement. Sauf si vous écrivez une application intranet et obtenez le fichier par un accès direct au réseau!

ce qui a changé (et c'est le vrai point de l'élément de bug que vous pointez to) est que FF3 ne permet plus l'accès au chemin du fichier à partir de JavaScript. Et je ne laisserai pas taper / coller un chemin, ce qui est plus ennuyeux pour moi: j'ai une extension shell qui copie le chemin d'un fichier de Windows Explorer vers le presse-papiers et je l'ai beaucoup utilisé sous cette forme. J'ai résolu le problème en utilisant L'extension DragDropUpload. Mais cela devient hors sujet, je le crains.

je me demande ce que vos formulaires Web font pour arrêter de travailler avec ce nouveau comportement.

[EDIT] après avoir lu la page liée par Mike, je vois en effet des utilisations intranet du chemin (identifier un utilisateur par exemple) et des utilisations locales (afficher l'aperçu d'une image, Gestion locale des fichiers). L'utilisateur Jam-es semble fournir une solution de contournement avec nsIDOMFile (pas encore essayé).

2
répondu PhiLho 2008-10-08 06:29:10

nous ne pouvons pas obtenir le chemin complet du fichier en FF3. Ce qui suit pourrait être utile pour la personnalisation des composants de fichiers. 

<script>

function setFileName()
{
    var file1=document.forms[0].firstAttachmentFileName.value; 

    initFileUploads('firstFile1','fileinputs1',file1);
    }
function initFileUploads(fileName,fileinputs,fileValue) {
    var fakeFileUpload = document.createElement('div');
    fakeFileUpload.className = 'fakefile';
    var filename = document.createElement('input');
    filename.type='text';
    filename.value=fileValue;
    filename.id=fileName;
    filename.title='Title';
    fakeFileUpload.appendChild(filename);
    var image = document.createElement('input');
    image.type='button';
    image.value='Browse File';
    image.size=5100;
    image.style.border=0;
    fakeFileUpload.appendChild(image);
    var x = document.getElementsByTagName('input');
    for (var i=0; i&lt;x.length;i++) {
        if (x[i].type != 'file') continue;
        if (x[i].parentNode.className != fileinputs) continue;
        x[i].className = 'file hidden';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].parentNode.appendChild(clone);
        x[i].relatedElement = clone.getElementsByTagName('input')[0];
        x[i].onchange= function () {
            this.relatedElement.value = this.value;
        }}
    if(document.forms[0].firstFile != null && document.getElementById('firstFile1') != null)
    {
    document.getElementById('firstFile1').value= document.forms[0].firstFile.value;
    document.forms[0].firstAttachmentFileName.title=document.forms[0].firstFile.value;
    }
}

function submitFile()
{
alert( document.forms[0].firstAttachmentFileName.value);
}
</script>
<style>div.fileinputs1 {position: relative;}div.fileinputs2 {position: relative;}
div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}
input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);
    opacity: 0;z-index: 2;}</style>

<html>
<body onLoad ="setFileName();">
<form>
<div class="fileinputs1">
<INPUT TYPE=file NAME="firstAttachmentFileName" styleClass="file" />
</div>
<INPUT type="button" value="submit" onclick="submitFile();" />
</form>
</body>
</html>
2
répondu Jay 2010-12-08 03:11:42

une façon extrêmement laide de résoudre cela est que l'utilisateur tape manuellement le répertoire dans une zone de texte, et ajoute ce retour à l'avant de la valeur du fichier dans le JavaScript.

Messy... mais cela dépend du niveau d'utilisateur avec lequel vous travaillez, et va à l'encontre de la question de la sécurité. 

<form>
    <input type="text" id="file_path" value="C:/" />
    <input type="file" id="file_name" />
    <input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>

JavaScript 

var str = document.getElementById('file_path').value;
var str = str + document.getElementById('file_name').value;
1
répondu Yi Jiang 2011-10-07 12:38:30

vous ne pouvez tout simplement pas le faire avec FF3.

l'autre option pourrait être d'utiliser applet ou d'autres contrôles pour sélectionner et télécharger des fichiers.

0
répondu 2008-09-17 08:48:53

regardez XPCOM , il pourrait y avoir quelque chose que vous pouvez utiliser si Firefox 3 est utilisé par un client.

0
répondu LohanJ 2008-09-17 08:53:04

il s'agit d'une solution/solution alternative... Dans FF3, vous pouvez récupérer le chemin complet du fichier dans une boîte de texte au lieu de la boîte de recherche de fichier. Et que trop... Par glisser/déposer le fichier!

vous pouvez faire glisser drop votre fichier dans une zone de texte dans votre page html. et il affichera le chemin complet du fichier. Ces données peuvent être facilement transférées sur votre serveur ou manipulées.

Tout ce que vous avez à faire est d'utiliser L'extension DragDropUpload""

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

cette extension vous aidera à faire glisser des fichiers dans votre boîte de recherche de fichier (fichier D'entrée). Mais vous ne pourrez toujours pas obtenir le chemin complet du fichier, si vous essayez de récupérer.

donc, j'ai légèrement modifié cette extension. De la même façon, je peux faire glisser déposer un fichier sur n'importe quelle boîte "Text Input" et obtenir le chemin complet du fichier. Et ainsi je peux obtenir le chemin complet du fichier dans FF3 Firefox 3.

0
répondu Yi Jiang 2011-10-07 12:39:46

ceci est un exemple qui pourrait fonctionner pour vous si ce dont vous avez besoin n'est pas exactement le chemin, mais une référence au fichier travaillant hors ligne.

http://www.ab-d.fr/date/2008-07-12 /

C'est en français, mais le code est javascript :)

ce sont les références que l'article pointe à: http://developer.mozilla.org/en/nsIDOMFile http://developer.mozilla.org/en/nsIDOMFileList

0
répondu Victor 2014-07-20 15:53:01