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類(lèi)型來(lái)的,即有幾種mime類(lèi)型,長(zhǎng)度就是幾(待驗(yàn)證)
//如果粘貼純文本,那么len=1,如果粘貼網(wǎng)頁(yè)圖片,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中顯示出來(lái)
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字符串
//可以在這里寫(xiě)上傳邏輯 直接將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)頁(yè)圖片那么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中顯示出來(lái)
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 表示沒(méi)有錯(cuò)誤。
// 如果有錯(cuò)誤,errno != 0,可通過(guò)下文中的監(jiān)聽(tīng)函數(shù) fail 拿到該錯(cuò)誤碼進(jìn)行自定義處理
errno: 0,
// data 是一個(gè)數(shù)組,返回若干圖片的線(xiàn)上地址
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)一張或多張圖片上傳(云開(kāi)發(fā))
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一張或多張圖片上傳,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09
動(dòng)態(tài)調(diào)用CSS文件的JS代碼
動(dòng)態(tài)調(diào)用CSS文件,一般用于頁(yè)面的多種顏色選擇,通過(guò)調(diào)用不同的css實(shí)現(xiàn)不用的頁(yè)面顏色效果。2010-07-07
淺談webpack打包過(guò)程中因?yàn)閳D片的路徑導(dǎo)致的問(wèn)題
下面小編就為大家分享一篇淺談webpack打包過(guò)程中因?yàn)閳D片的路徑導(dǎo)致的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
本文給大家介紹使用Bootstrap新制作的一個(gè)登錄框,帶驗(yàn)證碼,帶校驗(yàn),非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友可以參考下2016-06-06
js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
javascript基于DOM實(shí)現(xiàn)權(quán)限選擇實(shí)例分析
這篇文章主要介紹了javascript基于DOM實(shí)現(xiàn)權(quán)限選擇的方法,實(shí)例分析了javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)選擇與添加刪除等操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
JavaScript實(shí)現(xiàn)定時(shí)隱藏與顯示圖片的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)定時(shí)隱藏與顯示圖片的方法,可實(shí)現(xiàn)javascript定時(shí)關(guān)閉圖片的功能,涉及javascript針對(duì)頁(yè)面元素屬性定時(shí)操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08

