In JavaScript ist es möglich, einen Dateibrowser Dialog programmatisch zu starten?

Anstelle des Tags <input type="file"> möchte ich eine Schaltfläche haben, die einen Dateibrowserdialog startet.In JavaScript ist es möglich, einen Dateibrowser Dialog programmatisch zu starten?

Mein erster Gedanke war, eine versteckte Datei Eingabemarke und eine Schaltfläche zu haben. Ich würde den Knopf benutzen, der auf den Knopf klickt, um den Onclick der versteckten Dateieingabe zu feuern, aber ich konnte nicht richtig funktionieren.

Die Frage ist also, ist das überhaupt möglich? Und zweitens gibt es einen schöneren Weg dies zu tun und trotzdem die Informationen in einem Formular zurückzusenden?

Dies ist die unterste Ebene der degradierenden Funktionalität (von Flash zu JavaScript (unsere Seite funktioniert nicht ohne JS)), also muss es nur mit Basic JS und HTML arbeiten.

Quelle

2008-10-16 user28655

Es funktionierte für mich ... siehe meine Antwort unten. Vielleicht ist es eine Browserkompatibilität. Diese Frage ist 6 Jahre alt. – Rolf

Ja, es ist möglich (in den meisten Browsern) über Opazität. Here's a tutorial.

Quelle

2008-10-16 17:27:58 ceejayoz

Beachten Sie, dass dies ein Sicherheitsproblem ist und Maßnahmen ergriffen werden können, um dies in zukünftigen Browsern zu verhindern. – eyelidlessness

Möglich? Ja. Empfohlen? Nein. Sicherheitsproblem? Bestimmt. – Kon

Ich habe das überprüft und es tut nicht ganz, was ich will. Und mit den möglichen Sicherheits-/Abwertungsproblemen werde ich es nicht verwenden.Danke für die Antwort. – user28655

Ich habe dies getan (siehe ceejayoz 'Antwort) in der Vergangenheit, aber jetzt empfehlen, dagegen. Es ist ein Sicherheitsproblem und kann nicht für die Zukunft zuverlässig sein. Eine viel bessere Lösung besteht darin, Ihr Upload-Formular schrittweise zu verbessern, sodass die Dateieingabe durch einen Flash- oder Java-basierten Uploader mit mehr Funktionen ersetzt wird (oder bessere Funktionen in HTML 5 verwendet werden, wenn sie verfügbar sind).

Quelle

2008-10-16 17:32:45 eyelidlessness

Bevor Sie Flash oder ein Java-Applet verwenden, sollten Sie immer das einfache Formular verwenden. – Jan

@Jan, das ist, was ich in meiner Antwort sagte: "progressiv erweitern" bedeutet, dass Sie mit dem einfachen HTML beginnen und es auf der Client-Seite (JS, Flash, was auch immer) nach dem Laden verbessern. – eyelidlessness

Anstatt zu versuchen, die Dateieingabesteuerung des Browsers zu hacken, würde ich vorschlagen, einen Flash-basierten Datei-Uploader wie SWFUpload zu verwenden. Ich habe begonnen, dies in einem meiner Projekte zu verwenden und bin sehr zufrieden damit.

Sie erhalten JavaScript-Callbacks und Sie können alles tun, was Sie für eine UI wollen (der Flash ist nur die Upload-Funktion).

Quelle

2008-10-16 17:52:49

Ich würde lieber Transparenztricks vermeiden.

Das ist für mich gearbeitet (nutzt jQuery):

$("#upload-box").change(function(){ 
    $("#upload-click-handler").val($(this).val()); 
}); 
$("#upload-click-handler").click(function(){ 
    $("#upload-box").click(); 
});

Und die HTML:

<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" /> 
<input id="upload-click-handler" type="text" readonly />

Es erstellt eine Texteingabe, und einen versteckten Upload-Eingang und Patches (= Routen) die Klicken Sie auf die Texteingabe zur versteckten Dateieingabe.

Wenn eine Datei ausgewählt wird, schreibt sie den Namen der Datei in die Texteingabe zurück, entsprechend den Erwartungen der meisten Benutzer an die Schnittstelle.

Sollte auf FF, Chrome, IE9 und + arbeiten. Ich habe es nicht auf IE8 getestet.

Hier ist ein jsfiddle. Danke, dass Sie meine Antwort geupdated haben, wenn es Ihnen gefällt.

Quelle

2014-01-12 00:32:06 Rolf

es gibt nur den Dateinamen zurück, aber wie man den ganzen Pfad der Datei bekommt wie 'c:/test.png' – Jeevanantham

@ jerith2, man kann nicht den vollständigen Pfad bekommen und es wäre sowieso nicht nützlich. Sie können die Datei mit einem FileReader-Objekt lesen, wenn Sie die Binärdaten der Datei sehen möchten (die Sie bei Bedarf in andere Daten konvertieren können). –

Sie können es ohne irgendwelche Sicherheitsprobleme tun. Code nur, dass auf onmouseenter wird der Index der realen Upload-Taste (Sie können die Deckkraft oder transparent machen) und dann müssen Sie nicht einen Klick auslösen, sondern nur den Klick vom Benutzer.

Quelle

2014-01-15 09:15:43

In JavaScript ist es möglich, einen Dateibrowser Dialog programmatisch zu starten?

Antwort

Verwandte Themen