<?php
if ($_FILES){
print_r($_FILES);
exit();
}
//print_r($_FILES['Filedata']['tmp_name']);
?>
<!DOCTYPE html>
<html>
<head>
<title>test chrome paste image</title>
<style>
DIV#editable {
width: 400px;
height: 300px;
border: 1px dashed blue;
}
</style>
</head>
<body >
<h2>test image paste in browser</h2>
<div id="non-editable" >
<p>copy the following img, then paste it into the area below</p>
<img src="http://imgstore03.cdn.sogou.com/app/a/100520021/7c5f0dec37dbbce6bee70352b1ccc0f1" />
</div>
<div id="editable" contenteditable="true" >
<p>this is an editable div area</p>
<p>paste the image into here.</p>
</div>
</body>
<script type="text/javascript">
(function() {
function paste_img(e) {
if ( e.clipboardData.items ) {
// google-chrome
alert('support clipboardData.items(chrome ...)');
ele = e.clipboardData.items
for (var i = 0; i < ele.length; ++i) {
if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
var blob = ele[i].getAsFile();
window.URL = window.URL || window.webkitURL;
var blob = ele[i].getAsFile();
window.URL = window.URL || window.webkitURL;
var blobUrl = window.URL.createObjectURL(blob);
var new_img= document.createElement('img');
new_img.setAttribute('src', blobUrl);
var new_img_intro = document.createElement('p');
new_img_intro.innerHTML = 'the pasted img url(open it in new tab): <br /><a target="_blank" href="' + blobUrl + '">' + blobUrl + '</a>';
document.getElementById('editable').appendChild(new_img);
document.getElementById('editable').appendChild(new_img_intro);
uploadImg(ele[i].getAsFile())
}
}
} else {
alert('non-chrome');
window.setTimeout(function(){
var imgs = document.getElementById('editable').getElementsByTagName('img')
for (var i = 0,j = imgs.length ; i<j ; i++){
var img = imgs[i]
var blob = dataURItoBlob(img.getAttribute('src'))
console.log(blob)
uploadImg(blob)
}
}, 0 )
}
}
document.getElementById('editable').onpaste = paste_img
})()
function uploadImg(blob){
var form = new FormData
form.append('paste_img' , blob)
var xhr = new XMLHttpRequest()
xhr.open('POST', '')
xhr.send(form)
}
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
</script>
</html>
