javascript - Paste a piece of content with pictures and text. How to use js to get the picture and upload it to the server?

Question

I need to paste a piece of content with text and pictures, but the pictures need to be uploaded to the server separately. How to select the pictures from the pasted content. .

高洛峰 · Answer

General idea:

Listen to onpaste event

Get the clipboard data event.clipboardData through the event parameter in the event callback (not supported by all browsers)

// '/image/.test(event.clipboardData.types)' // 检查是否为图片

// 获取图片二进制数据（似乎浏览器的实现都会有大小差异）
Array.each(event.clipboardData.items, function(item){
if (/image/.test(item.type)) {
var blob = item.getAsFile();
var URL = window.URL || window.webkitURL;
var source = URL.createObjectURL(blob);
console.log(source) 
}
});

Send data to the backend server through Ajax. After the backend stores the image, it returns an accessible address of the image
Visit this address to see the pictures