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

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

General idea:

1. Listen to onpaste event

2. 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) 
   }
   });

3. Send data to the backend server through Ajax. After the backend stores the image, it returns an accessible address of the image

4. Visit this address to see the pictures