Detaillierte Einführung zum Drag-and-Drop zum Hochladen von Bildern

In diesem Artikel wird hauptsächlich HTML5 + CSS3 vorgestellt, um das Hochladen von Bildern per Drag & Drop ohne Plug-In zu realisieren (unterstützt Vorschau und Batch). Jetzt bietet HTML5 APIs und leistungsstarke APIs wie File, FileReader, XMLHttpRequest usw Stellen Sie uns einen Drag-and-Drop-Upload zur Verfügung. Wer Interesse hat, kann sich informieren. Das Hochladen kommt im Grunde häufig in Projekten vor. Es wird im Allgemeinen verwendet: 1. Formularübermittlung 2. Flash3, HTML5-Formularübermittlung aktualisiert die Seite, und es ist schwierig, Flash mehr zu verwenden, da es berücksichtigt werden kann Bei fast allen Browsern habe ich im Projekt immer das Uploadify-Tool verwendet, das auf HTML5 basiert. Natürlich können Sie jetzt auf der offiziellen Website nachschauen, ob es eine leistungsstarke API gibt Funktionen wie File, FileReader, XMLHttpRequest usw. Die API bietet uns die Möglichkeit zum Hochladen per Drag & Drop. Rendering 1: Rendering 2: Da der lokale Upload zu schnell ist, habe ich ein 80-Megapixel-GIF aufgenommen, und schließlich können Sie den detaillierten Effekt des Uploads sehen

1 Detaillierte Einführung in das Ziehen und Ablegen von Bildern zum Hochladen ohne Plug-in (unterstützt Vorschau und Stapelverarbeitung)

Einführung : Dieser Artikel führt hauptsächlich HTML5 + CSS3 ein, um das Hochladen von Bildern per Drag & Drop ohne Plug-Ins zu realisieren (unterstützt Vorschau und Batch). Jetzt bietet HTML5 APIs und leistungsstarke APIs wie File, FileReader, XMLHttpRequest usw Es ist uns möglich, Bilder per Drag-and-Drop hochzuladen. Wer Interesse hat, kann sich informieren.

2. HTML5/CSS3 klassischer Fall – Drag-and-Drop zum Hochladen von Bildern ohne Plug-in (2)

Einführung: Der vorherige Artikel hat das gesamte HTML und CSS dieses Projekts implementiert: HTML5 CSS3 Klassischer Fall: Ziehen und Ablegen zum Hochladen von Bildern ohne Plug-Ins (unterstützt Vorschau). und Batch) (1) Dieser Blog basiert direkt auf dem vorherigen. Der endgültige Effekt ist: Rendering 1: Rendering 2: Okay, bitte erlauben Sie mir, das Bild zweimal zu posten, damit jeder den Effekt sehen kann li unseres Bild-HTML ist eigentlich ziemlich kompliziert, daher habe ich einige Änderungen am HTML-Dokument vorgenommen:

3 HTML5/CSS3 klassischer Fall – Drag-and-Drop-Upload von Bildern ohne Plug-in (1)

Einführung: Durch das Absenden des Formulars wird die Seite aktualisiert, was das Hochladen erschwert asynchron; Flash ist möglicherweise nützlicher, da es fast alle Browser berücksichtigen kann, da das Upload-Tool im Projekt auch auf Html5 basiert Werfen Sie einen Blick auf die offizielle Website. Natürlich bietet HTML5 jetzt eine API und leistungsstarke APIs wie File, FileReader, XMLHttpRequest usw. bieten uns die Möglichkeit zum Hochladen per Drag & Drop.

4. JS HTML5 Drag-and-Drop-Bildvorschau hochladen

Einführung: In diesem Artikel werden hauptsächlich die relevanten Informationen zur Drag-and-Drop-Upload-Bildvorschau von JS ausführlich vorgestellt. Interessierte Freunde können sich auf

beziehen .

HTML5-Drag-and-Drop-Upload-Bild-Beispieldemonstration_HTML5-Tutorial-Fähigkeiten

Ich verweise auf ein ausländisches Fotoalbum für den Schnittstellenstil. Die Website hat nicht Es hat sich viel geändert. Beim Hochladen wurden nur die Vogelgesänge in Chinesisch umgewandelt. Der Grund, warum ich mich dafür entschieden habe, ist, dass es drei Möglichkeiten gibt, Bilder hinzuzufügen. eine herkömmliche Option" width="400">

Einführung: Das Wichtigste beim Drag-and-Drop-Upload ist der js-Teil des Codes, der 70 % davon implementiert Darüber hinaus reichen 30 % einfach die Bildinformationen in den Hintergrund ein und führen dann die entsprechende Verarbeitung wie Komprimierung, Zuschneiden usw. durch. Interessierte Freunde können darauf verweisen

[Verwandte Q&A-Empfehlungen]:

Javascript – Fragen Sie nach Ideen, wie Sie das Hochladen von Bildern per Drag-and-Drop mit js implementieren können

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung zum Drag-and-Drop zum Hochladen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!