it-swarm-eu.dev

So rufen Sie den Dateipfad aus dem HTML-Eingabeformular in Firefox 3 ab

Wir haben ein einfaches HTML-Formular mit <input type="file">, wie unten gezeigt:

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

Wenn wir in IE7 (und wahrscheinlich in allen bekannten Browsern, einschließlich des alten Firefox 2) eine Datei wie "// server1/path/to/file/filename" übermitteln, funktioniert diese ordnungsgemäß und gibt den vollständigen Pfad zur Datei und den Dateinamen an.

In Firefox 3 wird nur "Dateiname" zurückgegeben, da die neue "Sicherheitsfunktion" den Pfad abschneidet, wie im Firefox-Fehlerverfolgungssystem ( https://bugzilla.mozilla.org/show_bug.cgi? id = 14322 )

Ich habe keine Ahnung, wie ich diese "neue Funktion" überwinden soll, da alle Upload-Formulare in meiner Webanwendung nicht mehr mit Firefox 3 funktionieren.

Kann jemand helfen, eine einzige Lösung zu finden, um den Dateipfad auf Firefox 3 und IE7 zu erhalten?

52
m_pGladiator

Wenn wir in IE7 (und wahrscheinlich in allen bekannten Browsern, einschließlich des alten Firefox 2) eine Datei wie "// server1/path/to/file/filename" übermitteln, funktioniert diese ordnungsgemäß und gibt den vollständigen Pfad zur Datei und den Dateinamen an.

Ich habe keine Ahnung, wie ich diese "neue Funktion" überwinden soll, da alle Upload-Formulare in meiner Webanwendung nicht mehr mit Firefox 3 funktionieren.

Hier gibt es ein großes Missverständnis. Warum brauchen Sie jemals den full Dateipfad auf der Serverseite? Stellen Sie sich vor, ich bin der Client und habe eine Datei unter C:\path\to\passwords.txt Und gebe Ihnen den vollständigen Dateipfad. Wie würden Sie als Server jemals dessen Inhalt bekommen? Haben Sie eine offene TCP Verbindung zu meinem lokalen Festplattendateisystem? Haben Sie die Funktion zum Hochladen von Dateien getestet, als Sie Ihre Webanwendung auf einem anderen Server in Betrieb genommen haben?

Es wird nur funktionieren, wenn beides der Client und der Server auf physisch demselben Rechner laufen, weil Sie dann das haben werden Zugriff auf das same Festplatten-Dateisystem. Dies würde nur auftreten, wenn Sie Ihre Website lokal entwickeln und daher sowohl der Webbrowser (Client) als auch der Webserver (Server) zufällig auf demselben Computer ausgeführt werden.

Dass der vollständige Dateipfad in MSIE und anderen alten Webbrowsern gesendet wird, liegt an einem Sicherheitsfehler. In den Spezifikationen W und RFC2388 wurde nie der vollständige Dateipfad angegeben. Nur der Dateiname. Firefox macht seinen Job richtig.

Um hochgeladene Dateien verarbeiten zu können, müssen Sie nicht den vollständigen Dateipfad kennen. Sie sollten sich eher für den vollständigen Dateiinhalt interessieren, den der Client bei einem multipart/form-data Anfrage. Ändern Sie Ihr Formular so, dass es wie in RFC2388 angegeben aussieht:

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

Wie der Inhalt der hochgeladenen Datei auf der Serverseite abgerufen wird, hängt von der verwendeten serverseitigen Programmiersprache ab.

  • Java/JSP : Sie möchten HttpServletRequest#getPart() oder Apache Commons FileUpload) verwenden API um es zu analysieren. Sie sollten ein InputStream mit dem Dateiinhalt erhalten, den Sie nach Ihrem Geschmack in jedes OutputStream schreiben können. Ein Beispiel finden Sie in diese Antwort .

  • Java/JSF : Sie möchten die Komponente <h:inputFile> oder eine andere von bereitgestellte Datei-Upload-Komponente verwenden die Komponentenbibliothek, die Sie verwenden. Auch hier möchten Sie den Dateiinhalt im Stil eines InputStream erhalten. Siehe diese Antwort für ein Beispiel.

  • [~ # ~] php [~ # ~] : der Dateiinhalt ist bereits implizit auf der temporären Festplatte gespeichert. Sie möchten die Funktion move_uploaded_file() verwenden, um sie an den gewünschten Ort zu verschieben. Siehe auch PHP-Handbuch .

  • ASP.NET : Keine ausführliche Antwort von mir, da ich es nicht tue, aber Google hat einige Beispiele für mich gefunden: ASP. NET-Beispiel , ASP.NET 2.0-Beispiel

Wenn Sie den Dateinamen als Teil der hochgeladenen Datei erhalten möchten, sollten Sie den vollständigen Pfad vom Dateinamen abschneiden . Diese Informationen sind für Sie nämlich völlig irrelevant. Siehe auch zum Beispiel diese Apache Commons FileUpload FAQ entry

Warum gibt FileItem.getName () den gesamten Pfad und nicht nur den Dateinamen zurück?

Internet Explorer enthält den gesamten Pfad zur hochgeladenen Datei und nicht nur den Basisdateinamen. Da FileUpload genau das bereitstellt, was vom Client (Browser) bereitgestellt wurde, möchten Sie möglicherweise diese Pfadinformationen in Ihrer Anwendung entfernen.

60
BalusC

Für die Vorschau in Firefox funktioniert dies - Anhang ist Objekt des Anhangselements im ersten Beispiel:

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

Kurz bevor FF3 herauskam, habe ich ein paar Experimente durchgeführt, und FF2 sendet nur den Dateinamen, wie did Opera 9.0. Nur IE sendet den vollständigen Pfad. Das Verhalten ist sinnvoll, da der Server nicht wissen muss, wo der Benutzer die Datei auf seinem Computer speichert, es ist für den Upload-Vorgang irrelevant. Es sei denn, Sie schreiben eine Intranet-Anwendung und rufen die Datei über direkten Netzwerkzugriff ab!

Was sich geändert hat (und das ist der eigentliche Grund für den Fehler, auf den Sie zeigen), ist, dass FF3 keinen Zugriff mehr von JavaScript auf den Dateipfad zulässt. Und ich werde dort keinen Pfad eingeben/einfügen lassen, was für mich ärgerlicher ist: Ich habe eine Shell-Erweiterung, die den Pfad einer Datei aus dem Windows-Explorer in die Zwischenablage kopiert, und ich habe ihn häufig in dieser Form verwendet. Ich habe das Problem mit der DragDropUpload-Erweiterung behoben. Aber das wird, fürchte ich, zum Thema.

Ich frage mich, was Ihre Webformulare tun, um nicht mehr mit diesem neuen Verhalten zu arbeiten.

[BEARBEITEN] Nachdem ich die von Mike verlinkte Seite gelesen habe, sehe ich tatsächlich die Verwendung des Pfads im Intranet (zum Beispiel einen Benutzer identifizieren) und die lokale Verwendung (Vorschau eines Bildes anzeigen, lokale Verwaltung von Dateien). User Jam-es scheint eine Problemumgehung mit nsIDOMFile zu bieten (noch nicht ausprobiert).

2
PhiLho

In FF3 kann der vollständige Dateipfad nicht ermittelt werden. Das Folgende kann zur Anpassung von Dateikomponenten nützlich sein.

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

Dies ist eine alternative Lösung/Lösung ... In FF3 können Sie den vollständigen Pfad der Datei in einem Textfeld anstelle des Dateisuchfelds abrufen. Und das auch ... Durch Drag & Drop der Datei!

Sie können Ihre Datei in ein Textfeld auf Ihrer HTML-Seite ziehen. und es wird der vollständige Pfad der Datei angezeigt. Diese Daten können einfach auf Ihren Server übertragen oder manipuliert werden.

Sie müssen lediglich die Erweiterung DragDropUpload verwenden

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

Diese Erweiterung hilft Ihnen beim Drag & Drop von Dateien in das Feld Datei durchsuchen (Eingabedatei). Aber immer noch können Sie nicht den vollständigen Pfad der Datei abrufen, wenn Sie versuchen, sie abzurufen.

Also habe ich diese Erweiterung ein wenig optimiert. Auf diese Weise kann ich eine Datei auf ein beliebiges "Texteingabefeld" ziehen und den vollständigen Pfad der Datei abrufen. Und so kann ich in FF3 Firefox 3 den vollständigen Pfad der Datei ermitteln.

0
Kumaresan

Mit FF3 geht das einfach nicht.

Die andere Option könnte die Verwendung von Applets oder anderen Steuerelementen zum Auswählen und Hochladen von Dateien sein.

0
roh

Eine äußerst hässliche Möglichkeit, das Problem zu beheben, besteht darin, dass der Benutzer das Verzeichnis manuell in ein Textfeld eingibt und dieses im JavaScript vor dem Wert der Datei hinzufügt.

Chaotisch ... aber es hängt von der Ebene des Benutzers ab, mit dem Sie arbeiten, und umgeht das Sicherheitsproblem.

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

Schauen Sie sich XPCOM an, möglicherweise können Sie etwas verwenden, wenn Firefox 3 von einem Client verwendet wird.

0
LohanJ

Dies ist ein Beispiel, das für Sie hilfreich sein kann, wenn Sie nicht genau den Pfad benötigen, sondern einen Verweis auf die Datei, die offline arbeitet.

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

Es ist in Französisch, aber der Code ist Javascript :)

Dies sind die Verweise, auf die der Artikel verweist: http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

0
Victor