Shulou(Shulou.com)06/03 Report--

This article shares with you the content of a sample analysis of the js-based paste event paste. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Currently, only Chrome supports obtaining image data from the clipboard. Fortunately, products that need this feature currently only support Chrome and Safari, and some of the new features of Chrome can be used to the fullest or cover most users. So this article only discusses how Chrome uses and how to block Safari, and it's much easier to look at other browser-related issues.

Paste event

You can use js to bind the paste event to an element in the page, and when the user mouse over the element or the element is in the focus state, the method to bind to the paste event runs.

The bound element is not necessarily input, ordinary div can also be bound, if it is bound to document, it is equivalent to the global, any time the paste operation will be triggered.

Event object

Get event object

Write the code for event binding first.

PasteEle.addEventListener ("paste", function (e) {if (! (e.clipboardData & & e.clipboardData.items)) {return;}})

The paste event provides a property of clipboardData, and if this property has an items attribute, you can see if there is any image-type data in items. Chrome has this attribute, Safari does not.

ClipboardData introduction

Let's introduce the clipboardData object, which is actually an object of type DataTransfer, and DataTransfer is an object produced by dragging, but actually the paste event is also it.

Introduction to the properties of clipboardData

Attribute type description dropEffectString default is noneeffectAllowedString default is uninitializedfilesFileList paste operation is empty ListitemsDataTransferItemList clipboard data types in typesArray clipboard this property is confusing under Safari

Items introduction

Items is a DataTransferItemList object, which is naturally full of data of type DataTransferItem.

Attribute

The DataTransferItem of items has two properties, kind and type

Attribute indicates that kind is generally a specific data type of string or filetype, such as which type of string or file it is, that is, MIME-Type

Method

The method parameter indicates that getAsFile is empty. If kind is file, you can use this method to get the file getAsString callback function. If kind is string, you can get the string by this method. The string needs to be obtained by the callback function. The first parameter of the callback function is the string in the clipboard.

There are other methods in the prototype, but they are generally not used when dealing with clipboard operations.

Types introduction

The common values in general types are

Text/plain, text/html, Files values indicate text/plain normal string text/html styled htmlFiles files (such as data in the clipboard)

Simple demo

PasteEle.addEventListener ("paste", function (e) {if (! (e.clipboardData & & e.clipboardData.items)) {return;} for (var I = 0, len = e.clipboardData.items.events; I

< len; i++) { var item = e.clipboardData.items[i]; if (item.kind === "string") { item.getAsString(function (str) { // str 是获取到的字符串 }) } else if (item.kind === "file") { var pasteFile = item.getAsFile(); // pasteFile就是获取到的文件 } }}); 注意如果是string类型的数据，可能针对具体是text/plain、text/html进行分别的处理。 坑在这里 根据亲自测验,遇到了一个很大的坑,暂时还不知道该怎么解决: 当ctrl+c复制图片并粘贴之后,clipboaddata的 DataTransferItem {kind: "string", type: "text/html"} 即输出的str:

When you right-click to copy the picture and paste it

DataTransferItem {kind: "file", type: "image/png"}

So here for the picture if you want to get the pasted picture to upload, only the right-click copy of the picture can be identified, ctrl+c can not.

Thank you for reading! This is the end of this article on "sample Analysis of paste based on js paste events". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.