[ExtJS]使用PHP上傳檔案圖片-WYSIWYG所視即所得網頁編輯器外掛 with CKEditor

這個範例是跟據之前的ExtJS-CKEditor上傳檔案及圖片使用jsp的方法改寫的,裡面可能有需多jsp的概念存在,不過在php上傳時是沒有問題的,不同於jsp範例,此處直require_once設定檔進來,而不使用讀取外部設定檔的方式。在使用上要修改CKConfig三個上傳參數,指定正確的url路徑。

                    filebrowserUploadUrl : 'CKEditorUpload.php?Type=File',   
filebrowserImageUploadUrl : 'CKEditorUpload.php?Type=Image',   
filebrowserFlashUploadUrl : 'CKEditorUpload.php?Type=Flash',

詳細的說明請參考[ExtJS]WYSIWYG所視即所得網頁編輯器外掛 with CKEditor

ExtJS外掛CKEditor使用PHP上傳檔案或圖片

有修改過的原始碼如下:

example.js

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
//Ext.QuickTips.init();
// turn on validation errors beside the field globally
//Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
var Form = new Ext.FormPanel({
id: 'Myorm',
frame: true,
labelAlign: 'top',
title: 'CKEditor in ExtJS',
bodyStyle:'padding:5px',
url:"getHtml.php",
width: 750,
layout: 'form',    // Specifies that the items will now be arranged in columns
items: [{
//columnWidth: 1,
xtype: 'fieldset',
labelWidth: 90,
title:'CKEditor',
defaults: {width: 700, border:false},    // Default config options for child items
defaultType: 'textfield',
autoHeight: true,
bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
},
items: [{
xtype: 'ckeditor',
fieldLabel: 'Editor',
name: 'htmlcode',
id:'htmlcode',
CKConfig: {
/* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */
customConfig : 'config.js', // This allows you to define the path to a custom CKEditor config file.
//toolbar: 'Full',
toolbar:[['Source'/*,'-','Save','NewPage','Preview','-','Templates'*/],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
/*['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],*/
['BidiLtr', 'BidiRtl'],['Link','Unlink','Anchor'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-'/*,'About'*/]
],
skin : 'office2003',
//filebrowserUploadUrl : 'ckeditor/uploader?Type=File',   
//filebrowserImageUploadUrl : 'ckeditor/uploader?Type=Image',   
//filebrowserFlashUploadUrl : 'ckeditor/uploader?Type=Flash',
filebrowserUploadUrl : 'CKEditorUpload.php?Type=File',   
filebrowserImageUploadUrl : 'CKEditorUpload.php?Type=Image',   
filebrowserFlashUploadUrl : 'CKEditorUpload.php?Type=Flash',
height : 200//,
//width: 700
}
}]
}],buttons:[{
text:'Save',
name:'Save',
handler:function()
{
alert(123);
Form.getForm().submit();
}//.createDelegate(Form.getForm())
}],
renderTo: bd
});
});

CKEditorUpload.php

<?php 
require_once "config.php";
// 目錄及文件的命名格式
$dirFormatter = date("Ym");
$fileFormatter = date("YmdHis");
//echo $baseDir;
if (!isset($baseDir) || $baseDir === null )
$baseDir = "UserFiles/";
$realBaseDir = $baseDir;
//echo '222'.$realBaseDir.'222';
if (!file_exists($realBaseDir)) {
mkdir($realBaseDir,0700);
}
/**
* 取得檔案檔名
*/
function  getNameWithoutExtension($fileName) {
return strtolower(substr($filename,0,strrpos($filename,'.'))); 
}
/**
* 取得檔案副檔名
*/
function getExtension($fileName) {
$data = explode(".",$fileName);
//echo 'tee'.strtolower($data[count($data)-1]).'ttt';
if(count($data)>=0)
{
return strtolower($data[count($data)-1]);
}
else 
return "";  
}
/**
* 判斷是否為可上傳檔案
*/
function extIsAllowed($fileType, $ext) {
$ext = strtolower($ext);
$allowList= $allowedExtensions[$fileType];
$denyList =$deniedExtensions[$fileType];
if (strlen($allowList) === 0) {
if(strpos($denyList,"|".$ext."|")===false)
return true;
else 
return false;
}
if (strlen($denyList) === 0 ) {
if(strpos($allowList,"|".$ext."|")===false)
return false;
else 
return true;
}
return false;
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload</title>
</head>
<body>
<?php 
$typeStr = $_GET["Type"];
if ($typeStr == null) {
$typeStr = "File";
}
// 要上傳的目錄
$currentPath = $baseDir.$typeStr."/";
//echo $currentPath;
if (!file_exists($currentPath)) {
mkdir($currentPath,0700);
}
$currentPath = $currentPath.$dirFormatter."/";
// Web的實際位置
//$currentDirPath = realpath(currentPath);
// 判斷檔案是否存在,不存在時則建立
//$dirTest = file($currentDirPath);
//echo $currentPath;
if (!file_exists($currentPath)) {
mkdir($currentPath,0700);
}
// 檔案上傳後的目錄位置http://xxx.xxx.xx/123/
//$http_url = substr($_SERVER['SCRIPT_NAME'],,$_SERVER['SCRIPT_NAME']);
$currentDirPath = realpath(".")."\\".$currentPath;
$currentPath =  curPageName().$currentPath;
//echo $currentDirPath;
//echo '<br/>'.$currentPath;
//logger.info(currentDirPath);
$newName = "";
$fileUrl = "";
$ErrorMsg = "";
if ($enabled) {
try {
// 取得文件名稱做處理
$fileNameLong = $_FILES['upload']['name'];
$fileNameLong = str_replace('\\', '/',$fileNameLong);
$pathParts = explode("/",$fileNameLong);
$fileName = $pathParts[count($pathParts) - 1];
// 取得副檔名
$ext = getExtension($fileName);
//echo $fileName;
//echo count($pathParts);
//var_dump($pathParts);
// 實際要存檔的名稱
$fileName = $fileFormatter.".".$ext;
// 上傳檔案的檔名
$nameWithoutExt = getNameWithoutExtension($fileName);
$pathToSave = $currentDirPath.$fileName;
//echo $pathToSave;
$fileUrl = $currentPath.$fileName;
//echo $fileUrl;
//echo $ext;
if (extIsAllowed($typeStr, $ext)) {
$counter = 1;
while (file_exists($pathToSave)) {
$newName = $nameWithoutExt."_".$counter."."
.$ext;
$fileUrl=$currentPath .$newName;
$pathToSave = $currentDirPath.$newName;
$counter++;
}
move_uploaded_file($_FILES['upload']['tmp_name'],  $pathToSave);
} else {
$ErrorMsg = "無效的檔案類型 ";
}
} catch (Exception $ex) {
$ErrorMsg = "無法得知的錯誤!";
}
} else {
$ErrorMsg = "未啟用CKEditor上傳功能!!";
}
// CKEditorFuncNum是要回傳位置
$callback = $_GET["CKEditorFuncNum"];
echo "<script type=\"text/javascript\">";
if ($ErrorMsg ==="") {
echo "window.parent.CKEDITOR.tools.callFunction("
.$callback. ",'" . $fileUrl . "',''" . ");";
} else {
echo "alert('" . $ErrorMsg . "');";
echo "history.back();";
}
echo ("</script>");
//out.flush();
//out.close();
//logger.debug("--- END DOPOST ---");
?>
</body>
</html>

config.php

<?php
function get_document_root()
{
if(isset($_SERVER['DOCUMENT_ROOT']))
{
return $_SERVER['DOCUMENT_ROOT'];
}
else
{
$script = $_SERVER['PHP_SELF'];
$full_path = $_SERVER['ORIG_PATH_TRANSLATED'];
$fp_parts = split('\\\\',$full_path);
$full_path = implod('/',$fp_parts);
$script_start = strpost($full_path,$script);
return substr($full_path,0,$script_start);
}
}
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["SCRIPT_NAME"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["SCRIPT_NAME"];
}
return $pageURL;
}
function curPageName() {
$data = curPageURL();
$arr = explode("/",$data);
$data = "";
for($i=0;$i<count($arr)-1;$i++)
{
$data = $data.$arr[$i]."/";
}
return $data;
}
$baseDir="userUpload/";// CKEditor上傳檔案存放的目錄
$debug = false;// 是否debug模式
$enabled = true;
$allowedExtensions = array("file"=>"","image"=>"|jpg|gif|jpeg|png|bmp","flashs"=>"|wf|fla|");//可上傳的副檔名
$deniedExtensions =array("file"=>"|html|htm|php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg|cgi|htaccess|asis|ftl|",
"image"=>"","flash"=>"");;//不可上傳的副檔名
$dirFormatter;// 目錄格式yyyMM
$fileFormatter;// 文件格式yyyyMMddHHmmssSSS
?>

原始程式下載

發表迴響