Safari ClipboardEvent.clipboardData überprüfen, ob Bild eingefügt

Question

Ich muss zusätzliches Verhalten hinzufügen, wenn Benutzer Bild in Mobile Safari einfügen. Ich verwende folgenden Code clipboardData zu erhalten:

document.getElementById('content').addEventListener('paste', function(e) { 
    var clipboardData = e.clipboardData; 
// check if image were pasted 
} 

Von diesem Punkt, wie kann ich überprüfen, ist es Bild (jpg, png, gif) eingefügt wurden, oder nicht?

Answer 1

Ich kann keine Daten von e.clipboardData bekommen, wie es überhaupt notierte. also benutze ich Editable div, dann kannst du prüfen, ob es ein Bild im Editierbaren div ist, und finde heraus, was darin ist.

document.getElementById("content").addEventListener("paste", function(e) { 
 
    setTimeout(() => { 
 
    var pasted = $("#content").children(); 
 
    if (!pasted.length) { 
 
     console.log("nothing pasted!"); 
 
     return; 
 
    } 
 
    pasted.map((i, x) => { 
 
     if (x.tagName != "IMG") { 
 
     console.log(x); 
 
     console.log(`${x.tagName} not image`); 
 
     return; 
 
     } 
 
     console.log(`pasted image=[${x.src}]!`); 
 
    }); 
 
    }); 
 
});

#content { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='content' contenteditable='true'></div>

wenn Sie data-url Sie bekommen können tel jpg oder png, wenn es nicht komplizierter sein wird, ein Back-End-api ist

benötigt