Js implements image Pasting and uploading to the server and displaying instances, js instances

Js implements image Pasting and uploading to the server and displaying instances, js instances

I recently read some demos about how to implement image Pasting and uploading in Javascript. The implementation is as follows: (paste can only be detected here, right-click the image, and paste it)

Demo1:

Document. addEventListener ('paste ', function (event) {console. log (event) var isChrome = false; if (event. clipboardData | event. originalEvent) {// not for ie11 some chrome versions use event. originalEvent var clipboardData = (event. clipboardData | event. originalEvent. clipboardData); if (clipboardData. items) {// for chrome var items = clipboardData. items, len = items. length, blob = null; isChrome = true; // Items. length is interesting. The preliminary judgment is based on the mime type, that is, there are several mime types, and the length is a few (to be verified) // If the plain text is pasted, then len = 1, if you paste a webpage image, len = 2, items [0]. type = 'text/plain ', items [1]. type = 'image/* '// If you paste an image using a tool, len = 1, items [0]. type = 'image/png '// If you paste plain text + HTML, len = 2, items [0]. type = 'text/plain ', items [1]. type = 'text/html '// console. log ('len: '+ len); // console. log (items [0]); // console. log (items [1]); // console. log ('items [0] kind: ', items [0 ]. Kind); // console. log ('items [0] MIME type: ', items [0]. type); // console. log ('items [1] kind: ', items [1]. kind); // console. log ('items [1] MIME type: ', items [1]. type); // block the default action to prevent the clipboard content from displaying the event in the div. preventDefault (); // find the pasted image in items. According to the above analysis, the loop for (var I = 0; I <len; I ++) is required) {if (items [I]. type. indexOf ("image ")! =-1) {// getAsFile () This method is only supported by living standard firefox ie11 and does not support blob = items [I]. getAsFile (); uploadImgFromPaste (blob, 'paste ', isChrome) ;}}/* if (blob! = Null) {var reader = new FileReader (); reader. onload = function (event) {// event.tar get. result is the Base64 encoded string var base64_str = event.tar get. result; // obtain the image base64 string // you can write the upload logic here to directly upload the base64 encoded string (you can try to pass the blob Object to see if the background program can parse it) uploadImgFromPaste (base64_str, 'paste ', isChrome);} reader. readAsDataURL (blob); // input blob Object, Read File} */} else {// for firefox setTimeout (function () {// The reason for setting setTimeout is to ensure that the image is inserted first. Enter the div and obtain the value var imgList = document. querySelectorAll ('# aaa img'), len = imgList. length, src_str = '', I; for (I = 0; I <len; I ++) {if (imgList [I]. className! = 'My _ img ') {// If yes, src_str is base64. If it is a copied webpage image, src_str is the address of the image on another server. src_str = imgList [I]. src ;}} uploadImgFromPaste (src_str, 'paste ', isChrome) ;}, 1) ;}} else {// for ie11 setTimeout (function () {var imgList = document. querySelectorAll ('# aaa img'), len = imgList. length, src_str = '', I; for (I = 0; I <len; I ++) {if (imgList [I]. className! = 'My _ img ') {src_str = imgList [I]. src ;}} uploadImgFromPaste (src_str, 'paste ', isChrome) ;}, 1) ;}} // call the Image Upload interface, upload the file to function uploadImgFromPaste (file, type, isChrome) {var formData = new formData (); FormData. append ('file', file); formData. append ('submission-type', type); var xhr = new XMLHttpRequest (); xhr. open ('post', '/upload_editor_photo3'); xhr. onload = function () {con Sole. log (xhr. readyState); if (xhr. readyState = 4) {if (xhr. status = 200) {var data = JSON. parse (xhr. responseText), editor = document. getElementById ('aaa'); if (isChrome) {var len = data. data. length; for (var I = 0; I <len; I ++) {var img = document. createElement ('img '); img. className = 'my _ img '; img. src = data. data [I]; // sets the image editor displayed after the image is uploaded. appendChild (img) ;}} else {var imgList = Document. querySelectorAll ('# aaa img'), len = imgList. length, I; for (I = 0; I <len; I ++) {if (imgList [I]. className! = 'My _ img ') {imgList [I]. className = 'my _ img '; imgList [I]. src = data. data [I] ;}}} else {console. log (xhr. statusText) ;};}; xhr. onerror = function (e) {console. log (xhr. statusText);} xhr. send (formData );}

Demo2:

// Process the pasting event $ ("# aaa "). on ('paste ', function (eventObj) {// handle the pasting event var event = eventObj. originalEvent; var imageRe = new RegExp (/image \/. */); var fileList = $. map (event. clipboardData. items, function (o) {if (! ImageRe. test (o. type) {return} var blob = o. getAsFile (); return blob;}); if (fileList. length <= 0) {return} upload (fileList); // prevents the clipboard from displaying the event in the div by default. preventDefault () ;}); function upload (fileList) {for (var I = 0, l = fileList. length; I <l; I ++) {var fd = new FormData (); var f = fileList [I]; fd. append ('files', f); var editor = document. getElementById ("aaa"); $. ajax ({url: "/upload_editor_photo3", type: 'post', ype: 'json', data: fd, processData: false, contentType: false, xhrFields: {withCredentials: true}, headers: {'access-Control-Allow-origin': '*', 'access-Control-Allow-credentials': 'true'}, success: function (res) {var len = res. data. length; for (var I = 0; I <len; I ++) {var img = document. createElement ('img '); img. src = res. data [I]; // sets the image editor displayed after the image is uploaded. appendChild (img) ;}}, error: function () {alert ("Image Upload error ");}});}}

Note:Because only right-click copying is supported, you cannot copy two images at a time. copy and paste all images and upload them for research.

Html:

<div id="aaa" contentEditable="true" style="height:800px;border:1px solid #ccc"></div>

Format of the data returned by the API:

{// Errno is the error code. 0 indicates no error. // If any error occurs, errno! = 0. You can use the following listening function fail to get the error code for custom processing. errno: 0, // data is an array and the online address data of several images is returned: ['image 1 address', 'image 2 address ','...... ']}

In the above js example, the image is pasted and uploaded to the server, and all the content shared by the editor is displayed. I hope to give you a reference, and I hope you can also support the help house.