Bild-Upload-Plug-in ImgUploadJS: Verwenden Sie die HTML5-Datei-API, um das Hochladen von Screenshots und das Hochladen per Drag & Drop zu implementieren. _html5-Tutorial-Fähigkeiten

1. Hintergrund und Effekte

Derzeit sind die am häufigsten hochgeladenen Dateien im Internet, aber das Hochladen von Screenshots herkömmlicher Webbilder erfordert: Speichern Sie den Screenshot -> Wählen Sie den Pfad -> ; Speichern und dann auf Hochladen->Pfad auswählen->Hochladen->Einfügen klicken.
Das Hochladen von Bilddateien erfordert außerdem: Wählen Sie den Pfad und dann ->Hochladen->Einfügen. Die Schritte sind kompliziert und das Interneterlebnis ist entscheidend. Wenn das Hochladen von Screenshots und das Hochladen per Drag & Drop unterstützt wird, wird das Erlebnis erheblich verbessert werden.
Derzeit unterstützen sowohl Zhihu als auch Github diese beiden Funktionen für moderne Browser. Ich habe gelernt, sie zu implementieren, als ich nichts zu tun hatte. Heute werde ich darüber sprechen, welche Funktionen dieses 1-KB-Plug-in implementiert, wie man es verwendet und welche Prinzipien es hat .
Sehen Sie sich zunächst den Einfügeeffekt an:
Nachdem Sie einen Screenshot erstellt haben, fügen Sie ihn direkt ein und laden Sie ihn hoch.

Zum Hochladen ziehen und ablegen

http-Netzwerk

2. Anwendungsbeispiel
Direkter Anruf:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div id="box" Stil="width: 800px; height: 400px; border: 1px solid;" contenteditable="true">div>
2. <Skript Typ="text/ javascript" src="UploadImage.js">Skript> 
3. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//Rückruf nach Abschluss des Uploads
4. var img = new Image();
5. img.src = xhr.responseText;
this.appendChild(img);
});

AMD/CMD

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. <div id="box"  Stil="width: 800px; height: 400px; border: 1px solid;"  contenteditable="true">div>    
2. <script type="text/ javascript" src="require.js">Skript>    
3. <Skript>    
4. require(['UploadImage'], function (UploadImage) {    
5. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调    
6. var img = new Image();    
7. img.src = xhr.responseText;    
8. this.appendChild(img);    
9. });    
10. })    
11. Skript>   

浏览器支持🎜>•IE11

•Chrome
•FireFox •Safari(未测式，理论应该支持)
四.原理及源码


1.粘贴上传

处理目标容器（id）的paste事件，读取e.clipboardData中的数据，如果是图片进行以下处理： 用H5 File API(FileReader)获取文件的base64代码,并构建FormData异步上传.
2.拖拽上传
处理目标容器（id）的drop事件, 读取e.dataTransfer.files（H5 File API: FileList）中的数据，如果是图片并Geben Sie FormData an. 以下是初版本代码，比较简单.不再赘述。
部份核心代码

XML/HTML-Code

复制内容到剪贴板

1. Funktion UploadImage(id, url, key)
2. {
3. this.element = document.getElementById(id);
4. this.url = url; //Der Pfad für die Back-End-Bildverarbeitung
5. this.imgKey = key ||. "PasteAreaImgKey"; //Name im Backend erwähnt
6. }
7. UploadImage.prototype.paste = Funktion (Rückruf, formData)
8. {
9. var thatthat = this;
this.element.addEventListener('paste', function (e) {//Verarbeiten Sie das Einfügeereignis des Zielcontainers (id)
if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image')
11. > -1) {
var
12. das = dies,
13. reader = neu FileReader();
14. file = e.clipboardData.items[0].getAsFile();//Lesen Sie die Daten in e.clipboardData: Blob-Objekt
15. reader.onload = function (e) { //Nachdem der Lesevorgang abgeschlossen ist, wird xhr hochgeladen
var
16. xhr = neu XMLHttpRequest(),
17. fd = formData ||. (new FormData());; xhr.open('POST', thatthat.url, true);
xhr.onload
19. = Funktion () { callback.call(that, xhr);
20. }
21. fd.append(thatthat.imgKey, this.result); // this.result ruft die Base64 des Bildes ab
22. xhr.send(fd);
23. }
24. reader.readAsDataURL(file);//Base64-Kodierung abrufen
25. }
26. }, falsch);
27. }