Html 5 Drag & Drop zur Eingabe der Datei
Ich habe keine Ahnung, ob das möglich ist, ich kann nichts finden.
Was ich möchte, ist, dem Benutzer die Option zu bieten, entweder ein Bild "drag drop" zu ziehen oder das normale HTML-Eingabefeld zu verwenden.
Ich lade das Bild erst hoch, wenn das Formular gespeichert ist. Also ich denke, der Drag & Drop-Bereich würde nur das Feld aktualisieren?
Wie würde ich das machen?
Vielen Dank im Voraus.
2 Antworten
Ich kam hierher, um nach der gleichen Antwort zu suchen. Am Ende tun Sie folgendes, was Ihren Bedürfnissen entspricht.
Machen Sie eine div für Ihr Bild Drop-Box, dann fügen Sie Ihre Eingabe type="file" innerhalb der div. Stellen Sie Höhe und Breite wie gewünscht ein. Setzen Sie die Deckkraft auf 0. Jetzt füllt Ihre Eingabe das div, wird nicht gesehen, funktioniert aber immer noch.
%Vor%Stile unterhalb
%Vor%=== Bearbeiten ===
Ignoriere meinen Stil dort oben, du brauchst nur ein Formular mit einem Input Type = File zu verwenden. Stil / Layout nach Bedarf.
Wie bereits erwähnt, funktioniert das Ziehen und Ablegen von Bildern bei Shazoo nicht im IE. Funktioniert mit Firefox und Chrome. Unsicher von Oper und Safari. Sie können JavaScript für die Eingabeart = Datei aus Sicherheitsgründen nicht verwenden - es wird nur gelesen, wie Jasny gesagt hat, Sie müssen sich also darauf verlassen, was der Browser-Hersteller erlaubt.
In diesem Sinne können Sie dem IE-Benutzer einfach die Option geben, auf das Feld zu klicken, um eine Datei auszuwählen und hochzuladen. Der Standardeingabetyp="file" in IE bietet diese Möglichkeit. Solange Sie die Eingabe sichtbar lassen, sollten sie sie sehen. (Standard-Edge-Eingabetyp = Datei)
Filter für IE-Beispiel (basierend auf Ссылка )
%Vor%Dies testet für IE und Edge. Wenn es eine Version erkennt, verwendet es stopIeDefault, umDefault für Drag & Drop zu verhindern. Dies verhindert, dass IE das Bild lädt, wenn jemand es auf das Formular zieht und ablegt. (Edge scheint dies standardmäßig zu verhindern, so dass Sie stopIeDefault möglicherweise nicht aufrufen müssen, wie ich es getan habe.) Außerdem könnten Sie einen anderen Stil anwenden oder Code-Blöcke hinzufügen oder was nicht mit IE zu tun haben. Laut w3schools ist die IE-Browser-Freigabe ab August 2016 5,2-6,2%: Ссылка , wenn dies Ihnen bei der Entscheidung hilft was zu tun ist.
Wenn jemand bestätigen kann, ob Drag and Drop auf Safari oder Opera funktioniert, tun Sie es bitte. === Bearbeiten ===
Nein, das kann nicht gemacht werden. Gelöschte Dateien können nur über AJAX hochgeladen werden.
Die einzige Möglichkeit, eine Datei in einem normalen HTML-Formular hochzuladen, besteht in <input type="file"> . Dateieingaben sind schreibgeschützt .
Tags und Links javascript jquery php html5 forms