Javascript - Anzeigen eines eingefügten Zwischenablagebilds [Duplikat]

Question

Hier habe ich ein <div>und ein <img>Tag.

<div id='input' style="width: 500px; min-height: 40px; border: solid black;"></div><br>

<img id="img" style="width: 100px; min-height: 100px; border: gray;"></img>

Angenommen, ich habe ein Bild aus meinem Browser in meine Zwischenablage kopiert. Wenn ich das Bild in das Bild einfüge ( ctrl+ v) <div>, wird es am <img>Tag angezeigt . Welches Skript wird benötigt, um dies zu erreichen?

Answer 1

Sie können dieses onPasteEreignis einfach verwenden und die erste Datei in der Zwischenablage extrahieren:

    document.getElementById('input').onpaste = (e) => {
      const eventData = window.clipboardData || e.clipboardData ;
      const theFile = eventData.files[ 0 ];
    };

    <div id='input' style="max-height: 500px; max-height: 40px; border: solid black;" contenteditable></div><br>

    <img id="img" style="width: 100px; min-height: 100px; border: gray;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1004px-Google_%22G%22_Logo.svg.png">

Im Beispiel können Sie das Logo kopieren und in das einfügen div