php + js 实现拖拽上传以及复制粘贴上传图片

本文链接：https://blog.csdn.net/u013395223/article/details/50293913

/**xeditor.js**/

xeditor_config = {basePath:'xeditor/' };//xeditor路径
(function ($) {//阻止浏览器默认行。

$.fn.extend({
"setup": function () {

$(this).append('<div id="xeditor_content" style="width:100%;height:100%;overflow:auto" contenteditable></div>');

$(this).find('#xeditor_content').bind("drop",function(e){
$(this).find('#xeditor_content').drop(e.originalEvent)
});
$(this).find('#xeditor_content').bind("paste",function(e){
$(this).find('#xeditor_content').paste(e.originalEvent);
});

},
"getContent":function(){
var content=$(this).find('#xeditor_content').html();
return '<span style="'+$(this).find('#xeditor_content').attr('style')+'">'+content+'</span>';
},
"setContent":function(c){
$(this).find('#xeditor_content').html(c);
},

"setStyle":function(obj){
$(this).find('#xeditor_content').css(obj);
},

"drop":function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象

if(fileList.length == 0){
return false;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){

return false;
}
var target=e.target;
var reader = new FileReader();
var type=fileList[0].type;
reader.readAsDataURL(fileList[0]);

//上传
reader.onload = function(e)
{
xhr = new XMLHttpRequest();
xhr.open('POST', xeditor_config.basePath+'upload.php', true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();
fd.append('file',this.result);
fd.append('type', type);
xhr.send(fd);
xhr.onload = function ()
{
$("#xeditor_content").append('<img src="'+xeditor_config.basePath+''+xhr.responseText+'" alt=""/>');

}
}
},
"paste":function(e){
if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1)
{

var reader = new FileReader();
var file = e.clipboardData.items[0].getAsFile();
var type = e.clipboardData.items[0].type;

//ajax上传图片
reader.onload = function(e)
{
var xhr = new XMLHttpRequest(),
fd = new FormData();
xhr.open('POST', xeditor_config.basePath+'upload.php', true);
xhr.onload = function ()
{

$("#xeditor_content").append('<img src="'+xeditor_config.basePath+''+xhr.responseText+'" alt=""/>');

}
// this.result得到图片的base64

fd.append('file', this.result);
fd.append('type', type);

xhr.send(fd);
}
reader.readAsDataURL(file);

}
},

});
$(document).on({
dragleave:function(e){//拖离
e.preventDefault();
},
drop:function(e){//拖后放
e.preventDefault();
},
dragenter:function(e){//拖进
e.preventDefault();
},
dragover:function(e){//拖来拖去
e.preventDefault();
}
});

})(jQuery);

/**.upload.php**/处理上传过来的图片

<?php
header("Access-Control-Allow-Origin:*");
$url = 'http://'.$_SERVER['HTTP_HOST'];
$file = (isset($_POST["file"])) ? $_POST["file"] : '';
$type = (isset($_POST["type"])) ? $_POST["type"] : '';
if($file && $type )
{

$path=date('y-m-d');
//判断目录存在否，存在给出提示，不存在则创建目录
if (!is_dir($path)){

$res=mkdir(iconv("UTF-8", "GBK", $path),0777,true);

}

$data = base64_decode($file);

switch ($type) {
case 'image/pjpeg' :
$data = base64_decode(str_replace('data:image/pjpeg;base64,', '', $file));
$ext=".jpg";
break;
case 'image/jpeg' :
$data = base64_decode(str_replace('data:image/jpeg;base64,', '', $file));
$ext=".jpg";
break;
case 'image/gif' :
$data = base64_decode(str_replace('data:image/gif;base64,', '', $file));
$ext=".gif";
break;
case 'image/png' :
$data = base64_decode(str_replace('data:image/png;base64,', '', $file));
$ext=".png";
break;

}

if(!$ext){
die;
}

$randNum = rand(1, 10000000000) . rand(1, 10000000000);//随机数
$t = time().$randNum ;
$t=substr(md5($t),8,6);//6位md5加密
$name =$t.$ext;
file_put_contents($path.'/'.$name, $data);
echo $path.'/'.$name;
die;
}
?>

/**前台页面**/

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/js/jquery-1.7.2.js" type="text/javascript" ></script>
<script src="xeditor.js" type="text/javascript" ></script>
</head>

<body>

<div id="send" style="width:400px;height:400px;border:1px solid;" contenteditable>
</div>
<Script>
$("#send").setup();
</script>

</body>
</html>