Drag & Drop Bild in ein Webformular

Wir haben eine Webseite (HTML Javascript und PHP meist), die es einem Benutzer ermöglicht, ein Bild hochzuladen. Wir haben die normale Schaltfläche zum Durchsuchen, und es funktioniert gut. Wir möchten jedoch die Funktionalität hinzufügen, um stattdessen ein Bild in das Textfeld zu ziehen.Drag & Drop Bild in ein Webformular

Google Mail können Sie dies in ihrer Mail-App tun, so ist es möglich. Die einzige Möglichkeit, dies zu tun, besteht darin, ein Java-Applet zu erstellen, das all dies erledigt, aber am Ende sehr unordentlich ist.

Hat das jemand getan? wie funktioniert es?

Bearbeiten: Ich benutze Firefox auf einem Mac. Die meisten meiner Benutzer werden wahrscheinlich IE unter Windows verwenden.

dank

Quelle

2009-02-18 Brian Postow

Ich habe versucht, einen Abwurf und Bild zieht ihren Editor. Es wird den Pfad aufnehmen, wenn die Datei auf einer Webseite ist, aber wenn es auf Ihrem lokalen Laufwerk ist, wird der Pfad "file: // c: ...." sein, der nicht mit der Nachricht hochgeladen wird und wird am Ende als ein gebrochenes Bild.

Der Browser hat aus Sicherheitsgründen keinen Zugriff auf das lokale Dateisystem. Daher bezweifle ich, dass dies jemals so funktioniert, wie Sie es beschreiben.

Quelle

2009-02-18 21:43:36

nein in Google Mail, wenn Sie ein Bild in den Text ziehen, wird es in die E-Mail eingefügt. Ich bin nicht sicher, wie sie es machen, aber es ist nur eine Box mit einem roten Punkt, bis Sie es senden ... –

Geben Sie Ihren Browser an –

eine Datei in einem normalen Eingabefeld Dropping den lokalen Pfad zu dem Bild in das Eingabefeld kopieren, aber das für Sie da die .value Eigenschaft eines < input type = ‚file‘ wertlos > Das Tag ist aus Sicherheitsgründen schreibgeschützt.

Sie werden feststellen, dass Sie mit gmail nur ein Bild (zum Hochladen) per Drag & Drop in den < Eingangstyp = 'Datei' > Eingang und nicht in ein anderes Feld ziehen können.

Ich denke, was Sie fragen möchten, ist "how do I style a <input type='file'> tag like google", die ein ganz anderes Thema ist.

EDIT: Ok in IE Sie können eine Datei nicht in einen < Eingabetyp ziehen = ‚Datei‘ > Tag

Quelle

2009-02-18 21:39:34

für mich (auf einem Mac zumindest). Wenn ich ein Bild in ein Textfeld ziehe (zum Beispiel um ein Benutzerbild hochzuladen) lädt der Browser das Bild entweder als ganzes Fenster, oder es tut nichts ... –

Gehe zu einer neuen E-Mail und klicke auf "Datei anhängen" und dann Ziehe eine Datei auf den Text "No File Chosen" und überprüfe, ob es funktioniert. Es kann Browser-spezifisch sein. –

Nein, ich habe gerade in den riesigen Textbereich gezogen. –

Sie können dies in XUL (wodurch es effektiv eine Firefox-only-Lösung) oder in ActiveX (eine IE-only-Lösung) tun.

Quelle

2009-02-18 21:57:27 troelskn

der beste Weg, dies zu erledigen ist eine Adobe AIR Standalone wie das Foto-Uploader für https://www.photoshop.com/express

Sie einige großartige Informationen zu diesem Beitrag finden zu machen: http://devzone.zend.com/article/3650-Desktop-Image-Uploaders-Using-Adobe-AIR-and-JavaScript

Quelle

2009-02-19 11:18:46 Fortes

Ich glaube, ich habe einen Weg um die nervigen FF3 lokalen Dateisystem Probleme, aber ich brauche ein Stück JavaScript zu testen. Wie lese ich den lokalen Dateipfad aus dem Datei-Upload-Formular? Bitte, hör auf mit dem "Flash ist eine Lösung". Ich bin ein Flash-Entwickler von Beruf und auch ich denke nicht, dass es eine gute Lösung ist.

Quelle

2009-02-21 00:34:50

Haben Sie zufällig diese Firefox-Erweiterung installiert?

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

Ich wäre überrascht, wenn es eine Lösung gibt, ohne dass ein externes Plugin oder die Erweiterung zu installieren. Wie jemand erwähnte, wäre das ein Sicherheitsproblem. Eine Website wäre in der Lage, Dateien von den Computern der Leute zu holen und sie ohne ihr Wissen hochzuladen.

Quelle

2009-02-21 01:09:07 dtc

Schauen Sie sich das SWELL Framework an. Sein Javascript basiert.

Quelle

2010-04-16 14:14:55 Rhepungus