php + js 實現拖拽上傳 以及 複製貼上上傳圖片
/**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>
自己寫的程式碼,有什麼不足的地方，請大家指教