js implementiert Strg+V zum Einfügen und Hochladen von Bildern (kompatibel mit Chrome, Firefox, IE11)_Javascript-Kenntnisse

Wir haben alle mehr oder weniger verschiedene Rich-Text-Editoren verwendet. Es gibt eine sehr praktische Funktion. Kopieren Sie ein Bild und fügen Sie es in das Textfeld ein. Das ist also praktisch umgesetzt?

Prinzipanalyse
Extraktionsvorgang: copy=>paste=>upload
Während dieses Vorgangs müssen wir nur Folgendes tun: Abhören des Einfügeereignisses => Holen Sie sich den Inhalt in die Zwischenablage => Senden Sie eine Anfrage zum Hochladen
Um das Folgende leicht zu verstehen, müssen Sie zunächst einige Punkte verstehen:

• Wir können nur Webseitenbilder hochladen (klicken Sie mit der rechten Maustaste auf das Bild auf der Webseite und kopieren Sie es dann) und Screenshots (mit dem Screenshot-Tool aufgenommene Bilder, z. B. qq-Screenshot). Wir können nicht einfügen und hochladen Bilder im System (vom Desktop auf dem Computer, auf die Festplatte kopiert) existieren an völlig unterschiedlichen Orten.
• Das vom Snipping-Tool aufgenommene Bild unterscheidet sich etwas von dem durch Rechtsklick auf die Webseite kopierten Bild, daher sind auch die Verarbeitungsmethoden unterschiedlich.
• Beachten Sie das Einfügeereignis: Wenn Sie einen Einfügevorgang ausführen (Rechtsklick Einfügen/Strg+V), löst diese Aktion ein Zwischenablageereignis namens „Einfügen“ aus. Dieses Ereignis wird ausgelöst, wenn Schneiden Die Daten in der Platine werden vor dem Zielelement eingefügt. Wenn das Zielelement (in dem sich der Cursor befindet) ein bearbeitbares Element ist (z. B. ein Div mit dem Attribut contenteditable. Textarea funktioniert nicht), fügt die Einfügeaktion die Daten in der Zwischenablage maximal in das Zielelement ein ; Wenn das Zielelement nicht bearbeitbar ist, werden keine Daten eingefügt, das Einfügeereignis wird jedoch trotzdem ausgelöst. Die Daten sind während des Einfügevorgangs schreibgeschützt. Dieser Absatz wurde aus w3.org_the-paste-action übersetzt.
• Leider wurde nach dem Testen festgestellt, dass die Implementierung von Einfügeereignissen in Chrome (der neuesten Version), Firefox (der neuesten Version) und ie11 nicht vollständig mit w3c übereinstimmt hat seine eigenen Unterschiede (w3c Der Paste-Standard befindet sich daher nur im Entwurfsstadium).
  

Der Testcode und die Screenshots lauten wie folgt:

Chrom:

<textarea ></textarea> 
<div contenteditable style="width: 100px;height: 100px; border:1px solid"> 
</div> 
<script> 
document.addEventListener('paste', function (event) { 
  console.log(event) 
})
</script>

1. event有clipboardData属性，且clipboardData有item属性，clipboardData.item中的元素（对象）有type和kind属性；
2. 无论在哪进行粘贴，均可触发paste事件；
3. 在div（未特殊声明时，本文div均指设置了contenteditable属性的div） 里粘贴截图，不显示图片。img.src为base64编码字符串；
4. 在div里粘贴网页图片，直接显示图片，img.src为图片地址。

firefox：

1. event有clipboardData属性，clipboardData没有item属性；
2. 只有在textarea里或者可编辑的div（里才粘贴才触发paste事件；
3. 在div里粘贴截图，直接显示图片，img.src为base64编码字符串；
4. 在div里粘贴网页图片，表现同chrome。
   

ie11：（不截图了，可自行试验，其他浏览器同理b4d92b8d0d10f967e1cabc607dfe08a0npm intall=>node app.js)

以上就是本文的全部内容，希望对大家的学习有所帮助。