CKEditor實現圖片上傳,並且回調圖片路徑
阿新 • • 發佈:2017-07-22
js文件 文件上傳 hid class mode 兩種方法 review 重名 action
下面研究圖片上傳 要想出現上傳按鈕,兩種方法 第一種:還是剛才那個image.js
搜索“upload”可以找到這一段 id:‘Upload‘,hidden:true,而我使用的4.3的是
id:"Upload",hidden:!0,反正改為false就行了,(遺憾的是此種方法對我這個版本不起作用) 第二種:打開config.js文件,加入下面一句話 config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待會要上傳的action或servlet
OK現在基本上是下面這個樣子的了
上面的只是一個上傳頁面。也就相當於一個HTML的form表單, 要配置點擊"上傳到服務器上"按鈕後請求的Action。已在ckeditor/config.js中配置。 就是上面的 config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do"; 可使用chrome審查元素查看代碼
接下來就是action中的上傳方法: route
model方法
CKEditor編輯器的工具欄中初始的時候應該是這樣子的,沒有圖片上傳按鈕
下面研究圖片上傳 要想出現上傳按鈕,兩種方法 第一種:還是剛才那個image.js
搜索“upload”可以找到這一段 id:‘Upload‘,hidden:true,而我使用的4.3的是
id:"Upload",hidden:!0,反正改為false就行了,(遺憾的是此種方法對我這個版本不起作用) 第二種:打開config.js文件,加入下面一句話 config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待會要上傳的action或servlet
OK現在基本上是下面這個樣子的了
上面的只是一個上傳頁面。也就相當於一個HTML的form表單, 要配置點擊"上傳到服務器上"按鈕後請求的Action。已在ckeditor/config.js中配置。 就是上面的 config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do"; 可使用chrome審查元素查看代碼
接下來就是action中的上傳方法: route
$app->post(‘/savePic‘,function() use($app){ $data=\model\Agv::uploadPic(); });
//上傳圖片 public static function uploadPic() { $file_type=array(‘image/jpg‘,‘image/gif‘,‘image/png‘,‘image/bmp‘,‘image/jpeg‘);//文件類型 $max_size=‘1048576‘; // 最大文件限制(單位:byte) $upload_path=‘./attached/img‘.date("Ym").‘/‘; //圖片目錄路徑 $file=$_FILES[‘upload‘]; if (!is_dir($upload_path)) { //判斷存放文件目錄是否存在 mkdir($upload_path,0777,true); } if(!is_uploaded_file($file[‘tmp_name‘])){ //判斷上傳文件是否存在tmp_name $rs[‘message‘] = 2;//上傳文件不存在 return $rs; } if($file[‘size‘]>$max_size){ //判斷文件大小是否大於500000字節 $rs[‘message‘] = 3;//上傳文件大 return $rs; } if(!in_array($file[‘type‘],$file_type)){ //判斷圖片文件的格式 $rs[‘message‘] = 4;//上傳文件格式不對 return $rs; } $image_size = getimagesize($file[‘tmp_name‘]); $img = $image_size[0].‘*‘.$image_size[1]; $name = $file[‘name‘]; $fname = explode(‘.‘, $name); $pic_path = $upload_path.date("YmdHis").rand(100,999).".".$fname[1]; if(file_exists($pic_path)){ $rs[‘message‘] = 5;//文件重名 return $rs; } if(!move_uploaded_file($file[‘tmp_name‘],$pic_path)){ $rs[‘message‘] = 6;//文件移動錯誤 return $rs; }else{ $rs[‘message‘] = 1;//文件上傳成功 } $rs[‘path‘] = substr($pic_path, 1); //回調函數 返回圖片預覽 $callback = $_REQUEST["CKEditorFuncNum"]; echo "<script type=‘text/javascript‘>window.parent.CKEDITOR.tools.callFunction($callback,‘".$pic_path."‘,‘‘);</script>"; }
config.js
config.image_previewText=‘ ‘; //預覽區域顯示內容 config.filebrowserImageUploadUrl= "savePic"; //待會要上傳的action或servlet
圖像預覽
點擊確定即可插入到文章裏
CKEditor實現圖片上傳,並且回調圖片路徑