Javascript - วิธีแสดงภาพคลิปบอร์ดที่วาง [ซ้ำ]

Question

ที่นี่ฉันมี<div>และ<img>แท็ก

<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>

สมมติว่าฉันคัดลอกรูปภาพไปยังคลิปบอร์ดจากเบราว์เซอร์ของฉันและถ้าฉันวาง ( ctrl+ v) รูปภาพลงบน<div>รูปภาพจะปรากฏที่<img>แท็ก ต้องใช้สคริปต์อะไรในการบรรลุเป้าหมายนี้

Answer 1

คุณสามารถใช้onPasteเหตุการณ์นี้แยกไฟล์แรกในคลิปบอร์ด:

    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">

ในตัวอย่างคุณสามารถคัดลอกโลโก้และวางลงในไฟล์ div