js implements ctrl+v to paste and upload pictures (compatible with chrome, firefox, ie11)_javascript skills

We have all used various rich text editors more or less. There is a very convenient function among them. Copy an image and paste it into the text box, and the image will be uploaded. So this is convenient How is the function implemented?

Principle Analysis
Extraction operation: copy=>paste=>upload
During this operation, all we need to do is: listen to the paste event => get the content in the clipboard => send a request to upload
In order to understand the following easily, you need to understand a few points first:

• We can only upload webpage pictures (right-click the picture on the webpage, and then copy) and screenshots (pictures taken by the screenshot tool, eg: qq screenshot). We cannot paste and upload pictures in the system (from the desktop on the computer, copied to the hard disk), they exist in completely different places.
• The picture captured by the snipping tool is somewhat different from the picture copied by right-clicking on the web page, so the processing methods are also different.
• Be aware of the paste event: When you perform a paste (right-click paste/ctrl+v) operation, this action will trigger a clipboard event named 'paste'. This event is triggered when cutting The data in the board is inserted before the target element. If the target element (where the cursor is located) is an editable element (eg: a div with the contenteditable attribute set. Textarea does not work.), the paste action will insert the data in the clipboard into the target element in the most appropriate format. ; If the target element is not editable, data will not be inserted, but the paste event will still be triggered. The data is read-only during the pasting process. This paragraph is translated from w3.org_the-paste-action.
• Unfortunately, after testing, it was found that the implementation of paste events in chrome (the latest version), firefox (the latest version), and ie11 are not completely in accordance with w3c, and each has its own differences (w3c The paste standard is therefore only in the draft stage).
  

The test code and screenshots are as follows:

chrome:

<textarea ></textarea> 
<div contenteditable style="width: 100px;height: 100px; border:1px solid"> 
</div> 
<script> 
document.addEventListener('paste', function (event) { 
  console.log(event) 
})
</script>

1. event有clipboardData属性，且clipboardData有item属性，clipboardData.item中的元素（对象）有type和kind属性；
2. 无论在哪进行粘贴，均可触发paste事件；
3. 在div（未特殊声明时，本文div均指设置了contenteditable属性的div） 里粘贴截图，不显示图片。img.src为base64编码字符串；
4. 在div里粘贴网页图片，直接显示图片，img.src为图片地址。

firefox：

1. event有clipboardData属性，clipboardData没有item属性；
2. 只有在textarea里或者可编辑的div（里才粘贴才触发paste事件；
3. 在div里粘贴截图，直接显示图片，img.src为base64编码字符串；
4. 在div里粘贴网页图片，表现同chrome。
   

ie11：（不截图了，可自行试验，其他浏览器同理b4d92b8d0d10f967e1cabc607dfe08a0npm intall=>node app.js)

以上就是本文的全部内容，希望对大家的学习有所帮助。