Using JavaScript in the browser to get the files in the Clipboard

This article turns self personal website, original address: http://www.zoucz.com/blog/2016/01/29/get-file-from-clipboard/, Welcome to Exchange discussion

When editing content on a Web page, it is sometimes necessary to insert a picture, as a general practice:

1. Download pictures from the network to local or save to local
2. Click the Image upload button in the editor, select the local file and wait for the upload to complete.
3. Insert the uploaded image link into the editor

This is too troublesome, I prefer the operation is open QQ or some other tools,-paste. To do this we need to get the files in the Clipboard in the browser. The Chrome browser supports the Onpaste event, which allows you to get the file contents of the Clipboard in the event object, with the following code:

functionpaste (event) {varItems = (Event.clipboarddata | |event.originalEvent.clipboardData). Items; varDfd=Q.defer (); if(items.length>0 && items[0].kind=== "File"){        varBlob = Items[0].getasfile (); varReader =NewFileReader (); varFilename=NewDate (). GetTime () + ". png"; Reader.onload=function(e) {varbase64=E.target.result; Base64=base64.replace (/^data:image\/(png|jpg); base64,/, ""); varPath=writeimg (FILENAME,BASE64);        Dfd.resolve (path);        };    Reader.readasdataurl (BLOB); }    Else{dfd.resolve (); }    returndfd.promise;}

When this scenario occurs in a purely browser environment, the Writeimg method can optionally be uploaded to a file server via HTTP instead of being saved locally, and can be uploaded directly with the Blob object without reading it.

Where q is a promise library, writeimg is a use node to write to the local file system (Nw.js run), see my blog editor FileReader can read the Blob object as Dataurl (actually is the URI represented by base64) , Arraybuffer data in the format such as:

Using JavaScript in the browser to get the files in the Clipboard