js實(shí)現(xiàn)圖片粘貼上傳到服務(wù)器并展示的實(shí)例
最近看了一些有關(guān)于js實(shí)現(xiàn)圖片粘貼上傳的demo,實(shí)現(xiàn)如下: (這里只能檢測(cè)到截圖粘貼和圖片右鍵復(fù)制之后粘貼)
demo1:
document.addEventListener('paste', function (event) { console.log(event) var isChrome = false; if ( event.clipboardData || event.originalEvent ) { //not for ie11 某些chrome版本使用的是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比較有意思,初步判斷是根據(jù)mime類型來的,即有幾種mime類型,長度就是幾(待驗(yàn)證) //如果粘貼純文本,那么len=1,如果粘貼網(wǎng)頁圖片,len=2, items[0].type = 'text/plain', items[1].type = 'image/*' //如果使用截圖工具粘貼圖片,len=1, items[0].type = 'image/png' //如果粘貼純文本+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 ); //阻止默認(rèn)行為即不讓剪貼板內(nèi)容在div中顯示出來 event.preventDefault(); //在items里找粘貼的image,據(jù)上面分析,需要循環(huán) for (var i = 0; i < len; i++) { if (items[i].type.indexOf("image") !== -1) { //getAsFile() 此方法只是living standard firefox ie11 并不支持 blob = items[i].getAsFile(); uploadImgFromPaste(blob, 'paste', isChrome); } } /*if ( blob !== null ) { var reader = new FileReader(); reader.onload = function (event) { // event.target.result 即為圖片的Base64編碼字符串 var base64_str = event.target.result;//獲得圖片base64字符串 //可以在這里寫上傳邏輯 直接將base64編碼的字符串上傳(可以嘗試傳入blob對(duì)象,看看后臺(tái)程序能否解析) uploadImgFromPaste(base64_str, 'paste', isChrome); } reader.readAsDataURL(blob);//傳入blob對(duì)象,讀取文件 }*/ } else { //for firefox setTimeout(function () { //設(shè)置setTimeout的原因是為了保證圖片先插入到div里,然后去獲取值 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就是base64 如果是復(fù)制的其他網(wǎng)頁圖片那么src_str就是此圖片在別人服務(wù)器的地址 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); } }) //調(diào)用圖片上傳接口,將file文件以formData形式上傳 function uploadImgFromPaste (file, type, isChrome) { var formData = new FormData(); formData.append('files', file); formData.append('submission-type', type); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload_editor_photo3'); xhr.onload = function () { console.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]; //設(shè)置上傳完圖片之后展示的圖片 editor.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:
// 處理粘貼事件 $("#aaa").on('paste', function(eventObj) { // 處理粘貼事件 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); //阻止默認(rèn)行為即不讓剪貼板內(nèi)容在div中顯示出來 event.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', dataType: '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]; //設(shè)置上傳完圖片之后展示的圖片 editor.appendChild(img); } }, error: function(){ alert("上傳圖片錯(cuò)誤"); } }); } }
注意:因?yàn)橹恢С钟益I復(fù)制圖片,所以并不能一下復(fù)制兩張圖片,所有圖片復(fù)制并粘貼上傳待研究.
html:
<div id="aaa" contentEditable="true" style="height:800px;border:1px solid #ccc"></div>
接口返回?cái)?shù)據(jù)格式:
{ // errno 即錯(cuò)誤代碼,0 表示沒有錯(cuò)誤。 // 如果有錯(cuò)誤,errno != 0,可通過下文中的監(jiān)聽函數(shù) fail 拿到該錯(cuò)誤碼進(jìn)行自定義處理 errno: 0, // data 是一個(gè)數(shù)組,返回若干圖片的線上地址 data: [ '圖片1地址', '圖片2地址', '……' ] }
以上這篇js實(shí)現(xiàn)圖片粘貼上傳到服務(wù)器并展示的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)圖片上傳到服務(wù)器和回顯
- Node.js HTTP服務(wù)器中的文件、圖片上傳的方法
- JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能
- NodeJs實(shí)現(xiàn)簡(jiǎn)易WEB上傳下載服務(wù)器
- 詳解Node.js一行命令上傳本地文件到服務(wù)器
- 基于HTML5+js+Java實(shí)現(xiàn)單文件文件上傳到服務(wù)器功能
- 利用nodejs監(jiān)控文件變化并使用sftp上傳到服務(wù)器
- NodeJS與HTML5相結(jié)合實(shí)現(xiàn)拖拽多個(gè)文件上傳到服務(wù)器的實(shí)現(xiàn)方法
- Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法
- js實(shí)現(xiàn)上傳圖片到服務(wù)器
相關(guān)文章
微信小程序?qū)崿F(xiàn)人臉識(shí)別對(duì)比
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別對(duì)比,此文主要通過小程序?qū)崿F(xiàn)對(duì)比人臉相似度,并返回相似度分值,可以基于分值判斷是否為同一人,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10微信小程序有旋轉(zhuǎn)動(dòng)畫效果的音樂組件實(shí)例代碼
這篇文章主要介紹了微信小程序有旋轉(zhuǎn)動(dòng)畫效果的音樂組件,需要的朋友可以參考下2018-08-08Js 獲取當(dāng)前函數(shù)參數(shù)對(duì)象的實(shí)現(xiàn)代碼
這篇文章主要介紹了Js 獲取當(dāng)前函數(shù)參數(shù)對(duì)象的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-06-06JS中利用localStorage防止頁面動(dòng)態(tài)添加數(shù)據(jù)刷新后數(shù)據(jù)丟失
本文給大家分享一段js代碼利用利用localStorage防止頁面動(dòng)態(tài)添加數(shù)據(jù)刷新后數(shù)據(jù)丟失問題,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-03-03原生js實(shí)現(xiàn)簡(jiǎn)單的焦點(diǎn)圖效果實(shí)例
下面小編就為大家分享一篇原生js實(shí)現(xiàn)簡(jiǎn)單的焦點(diǎn)圖效果實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12

JavaScript性能優(yōu)化之函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)