wangEditor如何能實現(xiàn)直接粘貼把圖片上傳到服務(wù)器中
如何做到 ueditor批量上傳word圖片？
1、前端引用代碼
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD XHTML 1.0 Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<meta?http-equiv="Content-Type"content="text/html; charset=utf-8"/>
?
???<title>編輯器完整版實例-1.2.6.0</title>
????<script?type="text/javascript"src="https://www.cnblogs.com/zyzzz/p/ueditor.config.js"charset="utf-8"></script>
????<script?type="text/javascript"src="https://www.cnblogs.com/zyzzz/p/ueditor.all.js"charset="utf-8"></script>
????<link?type="text/css"rel="Stylesheet"href="https://www.cnblogs.com/zyzzz/p/WordPaster/css/WordPaster.css"/>
????<link?type="text/css"rel="Stylesheet"href="https://www.cnblogs.com/zyzzz/p/WordPaster/js/skygqbox.css"/>
????<scrip?ttype="text/javascript"src="https://www.cnblogs.com/zyzzz/p/WordPaster/js/json2.min.js"charset="utf-8"></script>
????<scrip?ttype="text/javascript"src="https://www.cnblogs.com/zyzzz/p/WordPaster/js/jquery-1.4.min.js"charset="utf-8"></script>
????<scrip?ttype="text/javascript"src="https://www.cnblogs.com/zyzzz/p/WordPaster/js/WordPaster.js"charset="utf-8"></script>
????<scrip?ttype="text/javascript"src="https://www.cnblogs.com/zyzzz/p/WordPaster/js/skygqbox.js"charset="utf-8"></script>
</head>
<body>
????<textarea?name="后臺取值的key"id="myEditor">這里寫你的初始化內(nèi)容</textarea>
????<script?type="text/javascript">
????????var?pasterMgr =?new?WordPasterManager();
????pasterMgr.Config["PostUrl"] =?"http://localhost:81/WordPaster2/WordPasterUEditor1x/php/upload.php"
????pasterMgr.Load();//加載控件
?
??????????UE.getEditor('myEditor',{onready:function(){//創(chuàng)建一個編輯器實例
??????????????pasterMgr.SetEditor(this);
??????????}});
????</script>
</body>
</html>
請求
文件上傳的默認(rèn)請求是一個文件，作為具有“upload”字段的表單數(shù)據(jù)。
響應(yīng)：文件已成功上傳
當(dāng)文件成功上傳時的JSON響應(yīng)：
uploaded-?設(shè)置為1。
fileName -?上傳文件的名稱。
url -?上傳文件的URL。
響應(yīng)：文件無法上傳
uploaded-?設(shè)置為0。
error.message -?要顯示給用戶的錯誤消息。
2、粘貼word里面的圖片路徑是fill://D 這種格式 我理解這種是非瀏覽器安全的 許多瀏覽器也不支持
目前項目是用了一種變通的方式：
先把word上傳到后臺 、poi解析、存儲圖片 、轉(zhuǎn)換html、替換圖片、放到富文本框里顯示
（富文本顯示有個坑：沒找到直接給富文本賦值的方法 要先銷毀 記錄下
success :?function(data) {
?????$('#content').attr('value',data.imagePath);
?????var?editor = CKEDITOR.instances["content"];?//你的編輯器的"name"屬性的值
?????if?(editor) {
???????editor.destroy(true);//銷毀編輯器
??????}????
?????CKEDITOR.replace('content');?//替換編輯器，editorID為ckeditor的"id"屬性的值
?????$("#content").val(result);????//對editor賦值
?????//CKEDITOR.instances.contentCkeditor.setData($("#content").text());
?}
3.接收上傳的圖片并保存在服務(wù)端
<?php
ob_start();
//201201/10
$timeDir =date("Ym")."/".date("d");
$uploadDir =dirname(__FILE__).'/upload/'.$timeDir;
$curDomain = "http://".$_SERVER["HTTP_HOST"]."/";
//相對路徑 http://www.ncmem.com/upload/2012-1-10/
$relatPath = $curDomain ."WordPaster2/WordPasterUEditor1x/php/upload/" . $timeDir . "/";
?
//自動創(chuàng)建目錄。upload/2012-1-10
if(!is_dir($uploadDir))
{
mkdir($uploadDir,0777,true);
}
?
//如果PHP頁面為UTF-8編碼，請使用urldecode解碼文件名稱
//$fileName = urldecode($_FILES['postedFile']['name']);
//如果PHP頁面為GB2312編碼，則可直接讀取文件名稱
$fileName = $_FILES['file']['name'];
$tmpName = $_FILES['file']['tmp_name'];
?
//取文件擴(kuò)展名jpg,gif,bmp,png
$path_parts =pathinfo($fileName);
$ext = $path_parts["extension"];
$ext =strtolower($ext);//jpg,png,gif,bmp
?
//只允許上傳圖片類型的文件
if($ext == "jpg"
????|| $ext == "jpeg"
????|| $ext == "png"
????|| $ext == "gif"
????|| $ext == "bmp")
{
????//年_月_日_時分秒毫秒.jpg
????$saveFileName = $fileName;
?
????//xxx/2011_05_05_091250000.jpg
????$savePath = $uploadDir . "/" . $saveFileName;
?
????//另存為新文件名稱
????if (!move_uploaded_file($tmpName,$savePath))
????{
exit('upload error!' . "文件名稱：" .$fileName . "保存路徑：" . $savePath);
????}
}
?
//輸出圖片路徑
//$_SERVER['HTTP_HOST']???localhost:81
//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php
$reqPath =str_replace("upload.php","",$_SERVER['REQUEST_URI']);
echo $relatPath .??$saveFileName;
header('Content-type: text/html; charset=utf-8');
header('Content-Length: ' .ob_get_length());
?>
效果展示：
?
在使用前需要配置一下，可以參考我寫的這篇文章：
鏈接：https://www.dianjilingqu.com/502888.html
