最近看了一些有關於js實現圖片粘貼上傳的demo,實現如下: (這里只能檢測到截圖粘貼和圖片右鍵復制之后粘貼)
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比較有意思，初步判斷是根據mime類型來的，即有幾種mime類型，長度就是幾（待驗證）
//如果粘貼純文本，那么len=1，如果粘貼網頁圖片，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 );
//阻止默認行為即不讓剪貼板內容在div中顯示出來
event.preventDefault();
//在items里找粘貼的image,據上面分析,需要循環
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對象，看看后台程序能否解析）
uploadImgFromPaste(base64_str, 'paste', isChrome);
}
reader.readAsDataURL(blob);//傳入blob對象,讀取文件
}*/
} else {
//for firefox
setTimeout(function () {
//設置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 如果是復制的其他網頁圖片那么src_str就是此圖片在別人服務器的地址
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);
}
})
//調用圖片上傳接口,將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]; //設置上傳完圖片之后展示的圖片
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); //阻止默認行為即不讓剪貼板內容在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]; //設置上傳完圖片之后展示的圖片 editor.appendChild(img); } }, error: function(){ alert("上傳圖片錯誤"); } }); } }
注意:因為只支持右鍵復制圖片,所以並不能一下復制兩張圖片,所有圖片復制並粘貼上傳待研究.
html:
<div id="aaa" contentEditable="true" style="height:800px;border:1px solid #ccc"></div>
接口返回數據格式:
{ // errno 即錯誤代碼，0 表示沒有錯誤。 // 如果有錯誤，errno != 0，可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理 errno: 0, // data 是一個數組，返回若干圖片的線上地址 data: [ '圖片1地址', '圖片2地址', '……' ] }