[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
    ?>

原始程式下載

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料