Comment obtenir le chemin du fichier à partir d'un formulaire de saisie HTML dans Firefox 3

Question

Nous avons un simple formulaire HTML avec <input type="file"> comme indiqué 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 connus, 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 du fichier. et le nom du fichier.

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

Je n'ai aucune idée de la façon de surmonter cette "nouvelle fonctionnalité", car elle fait que tous les formulaires de téléchargement de ma webapp ne fonctionnent plus sous Firefox 3.

Quelqu'un peut-il m'aider à trouver une solution unique pour obtenir le chemin du fichier à la fois sur Firefox 3 et IE7 ?

Answer 1

Dans IE7 (et probablement dans tous les navigateurs connus, 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 du fichier et le nom du fichier.

Je n'ai aucune idée de la façon de surmonter cette "nouvelle fonctionnalité", car elle fait que tous les formulaires de téléchargement de ma webapp ne fonctionnent plus sous Firefox 3.

Il y a un grand malentendu ici. Pourquoi avez-vous besoin de la complet le chemin d'accès au fichier du côté du serveur ? Imaginons que je sois le client et que je possède un fichier à l'adresse suivante C:\path\to\passwords.txt et je vous donne le chemin complet du fichier. Comment, en tant que serveur, obtiendriez-vous sa contenu ? Disposez-vous d'une connexion TCP ouverte vers mon système de fichiers sur disque local ? Avez-vous testé la fonctionnalité de téléchargement de fichiers lorsque vous avez mis votre application web en production sur une autre machine serveur ?

Il ne fonctionnera que si les deux le client et le serveur fonctionnent à physiquement le même machine, car vous aurez alors accès à la même système de fichiers du disque dur. Cela ne se produit que lorsque vous développez votre site web localement et que, par hasard, le navigateur web (client) et le serveur web (serveur) fonctionnent tous deux sur la même machine.

Le fait que le chemin d'accès complet au fichier soit envoyé dans MSIE et d'autres anciens navigateurs Web est dû à un problème de sécurité. bogue de sécurité . Le site W3 y RFC2388 les spécifications n'ont jamais mentionné d'inclure le chemin complet du fichier. Seulement le nom du fichier. Firefox fait son travail correctement.

Pour traiter les fichiers téléchargés, vous n'avez pas besoin de connaître le chemin d'accès complet du fichier. Vous devriez plutôt être intéressé par le fichier complet contenu que le client a déjà envoyé au serveur dans le corps de la requête dans le cas d'un multipart/form-data demande. Changez votre formulaire pour qu'il ressemble à ce qui suit, comme indiqué dans la RFC2388 :

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

La façon d'obtenir le contenu du fichier téléchargé du côté serveur dépend du langage de programmation côté serveur que vous utilisez.

• Java/JSP : vous souhaitez utiliser Apache Commons FileUpload API pour l'analyser. Vous devriez vous retrouver avec un InputStream avec le contenu du fichier, que vous pouvez à votre tour écrire dans n'importe quelle OutputStream à votre goût. Vous pouvez trouver un exemple dans cette réponse .

• Java/JSF : vous souhaitez utiliser Tomahawk t:inputFileUpload ou tout autre composant de téléchargement de fichiers fourni par la bibliothèque de composants que vous utilisez. Ici aussi, vous voudriez obtenir le contenu du fichier en saveur d'un InputStream . Voir ce blog y cette réponse pour un exemple.

• PHP le contenu du fichier est déjà implicitement stocké sur le disque temporaire. Vous souhaitez utiliser move_uploaded_file() pour le déplacer à l'endroit souhaité. Voir aussi Manuel PHP .

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

Lorsque vous souhaitez obtenir la partie du nom du fichier téléchargé, vous devez garniture le chemin d'accès complet à partir du nom du fichier. Cette information n'est pas du tout pertinente pour vous. Voir aussi, par exemple, ceci Entrée de la FAQ Apache Commons FileUpload

Pourquoi FileItem.getName() renvoie-t-il le chemin d'accès complet, et pas seulement le nom du fichier ?

Internet Explorer fournit le chemin d'accès complet au fichier téléchargé et pas seulement le nom du fichier de base. Étant donné que FileUpload fournit exactement ce qui a été fourni par le client (navigateur), vous pouvez supprimer ces informations de chemin dans votre application.

Answer 2

L'aperçu dans Firefox fonctionne de la manière suivante : la pièce jointe est l'objet de l'élément pièce jointe dans le premier exemple :

           if (attachment.files)
             previewImage.src = attachment.files.item(0).getAsDataURL();
           else
             previewImage.src = attachment.value;

Answer 3

En fait, juste avant la sortie de FF3, j'ai fait quelques expériences, et FF2 n'envoie que le nom du fichier, tout comme Opera 9.0. Seul IE envoie le chemin complet. Ce comportement est logique, car le serveur n'a pas besoin de savoir où l'utilisateur stocke le fichier sur son ordinateur, ce n'est pas pertinent pour le processus de téléchargement. Sauf si vous écrivez une application intranet et que vous obtenez le fichier par accès direct au réseau !

Ce qui a changé (et c'est le vrai point de l'article sur le bogue que vous indiquez) est que FF3 ne permet plus l'accès au chemin du fichier depuis JavaScript. Et ne permet pas de taper/coller un chemin à cet endroit, ce qui est plus ennuyeux pour moi : J'ai une extension shell qui copie le chemin d'un fichier de l'explorateur Windows vers le presse-papiers et je l'utilisais beaucoup sous cette forme. J'ai résolu le problème en utilisant l'extension DragDropUpload. Mais ceci devient hors-sujet, je le crains.

Je me demande ce que font vos formulaires Web pour ne plus fonctionner avec ce nouveau comportement.

[EDIT] Après avoir lu la page liée par Mike, je vois effectivement des utilisations intranet du chemin (identifier un utilisateur par exemple) et des utilisations locales (montrer 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é).

Answer 4

Nous ne pouvons pas obtenir le chemin complet du fichier dans FF3. Ce qui suit pourrait être utile pour la personnalisation du composant Fichier.

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

Answer 5

Vous ne pouvez tout simplement pas le faire avec FF3.

L'autre option pourrait consister à utiliser une applet ou d'autres contrôles pour sélectionner et télécharger les fichiers.